React Router, how to get data from a dynamic route

A very common need, when you use React Router with a dynamic parameter, is to fetch the data we need to show in the page. You can read the parameter with the useParams hook, or from props.match.params. Let’s see both ways.

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

Using the useParams hook

One way is to declare the route in this way:

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

Notice the /project/:id path. The :id part is the dynamic segment. 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 { 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.

A typical pattern is to fetch the data inside a useEffect that depends on id. This way the data reloads when the user navigates from one project to another:

useEffect(() => {
  fetch(`/api/projects/${id}`)
    .then(res => res.json())
    .then(data => setProject(data))
}, [id])

Using props.match.params

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 look up the post data in our data source before rendering the component.

Watch out: params are always strings

Whatever way you pick, the parameter you get is always a string, even when it looks like a number. Visiting /post/1 gives you '1', not 1.

This bites you when your data uses numeric ids and you compare with strict equality:

posts.find(p => p.id === match.params.id) //undefined!

p.id is the number 1, match.params.id is the string '1', so the comparison always fails and find() returns undefined. Convert the param first.

Here’s a full working example:

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 === Number(match.params.id))} />
)} />

Number(match.params.id) turns the string back into a number, and the lookup works.

Related posts about react: