React Router, how to get data from a dynamic route

A very common need, when you use React Router with dynamic parameter, is to fetch the data we need to show in the page.

For example we have a list of projects, and clicking it goes in the project detail with the URL /project/PROJECT_ID.

I found 2 ways to do that.

One is to declare the route in this way:

<Route path="/project/:id">
  <SingleProject />
</Route>

Notice the /project/:id path. This means the component will see the dynamic part in the id parameter.

Now in the SingleProject component, we can use the useParams hook to access the id parameter:

import { useHistory, useParams } from 'react-router-dom'

//...

const { id } = useParams()

In my case I use this id to filter out the data from an array of items, but you can query a database or do whatever you want with it.

An alternative way is to use props:

<Route path="/project/:id" render={(props) => <SingleProject {...props} />} />

In the SingleProject component, the one that is responsible for showing the data (as I listed it in the render prop above) we use the props we pass:

function SingleProject(props) {
...
}

Those props contain the params under the match.params property, so we can use object destructuring to get back our id:

const { id } = props.match.params

match is also available in inline rendered routes, sometimes useful because we can use the id parameter to lookup the post data in our data source before rendering the the component:

const posts = [
  { id: 1, title: 'First', content: 'Hello world!' },
  { id: 2, title: 'Second', content: 'Hello again!' }
]

const Post = ({post}) => (
  <div>
    <h2>{post.title}</h2>
    {post.content}
  </div>
)

//...

<Route exact path="/post/:id" render={({match}) => (
  <Post post={posts.find(p => p.id === match.params.id)} />
)} />