Skip to content

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)} />
)} />
→ Download my free React Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about react: