history.push() and Custom URL parameters using react-router

Question

I'm trying to create an app where users can join groups, and one of the pages I have is a group dashboard. For this, I created a route with a URL parameter of id.

<Router>
    <div>
        <LoggedRoute exact path = "/" component = {Home}/>
        <Route exact path = "/login" component = {Login}/>
        <Route exact path = "/groups/:id" component = {GroupDash}/>
    </div>
</Router>

When a user creates a group, it persists it in my database, and gets the docID to use as the url parameter.

I then use history.push("/groups/".concat(docID)) to attempt to re-direct my user to the new page. However, this doesn't work and instead takes me to .../groups/ vs .../groups/docID.

I initially thought that this was because the string, docID wasn't being created properly, but after logging the string to the console, it is correct.

Can someone help me with this?

Maybe [this](https://stackoverflow.com/questions/42701129/how-to-push-to-history-in-react-router-v4) helps? — Haensl, May 27 '20 at 21:30
@haensl not really, since Im able to successfuly use history.push for other links. I'm just having trouble passing in URL parameters using it — Nakul Upadhya, May 28 '20 at 00:13

Ajeet Shah · Accepted Answer · 2020-05-28T02:11:51.843

You didn't use Switch, I am not sure why. Here is how to use URL Parameters correctly in react-router:

Routes:

<Router>
  <Switch> {/* Use Switch */}
    <LoggedRoute exact path = "/" component = {Home}/>
    <Route exact path = "/login" component = {Login}/>
    <Route exact path = "/groups" component = {Groups}/> {/* This should be exact */}
    <Route exact path = "/groups/:id" component = {GroupDash}/> {/* This exact can be optional for this use case */}
  </Switch>
</Router>

And you can do history.push to go to that route:

<button
  onClick={() => {
    history.push(`/groups`)
  }}
>
  Groups
</button>
<button
  onClick={() => {
    history.push(`/groups/${1234}`)
  }}
>
  Groups dashboard
</button>

And to get the id in your component, you can use useParams hook or use withRouter HOC (use props.match.params?.id for the HOC):

import React from 'react'
import { useParams } from 'react-router-dom'

export default function GroupDash() {
  let { id } = useParams()

  return <>Group Dash: {id}</>
}

history.push() and Custom URL parameters using react-router

1 Answers1

Linked