# React Router, how to get data from a dynamic route

> Learn how to get data from a dynamic route in React Router, using the useParams hook to read the id parameter, or reading it from props.match.params instead.

Author: Flavio Copes | Published: 2021-02-07 | Canonical: https://flaviocopes.com/react-router-data-from-route/

A very common need, when you use [React Router](https://flaviocopes.com/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:

```jsx
<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:

```js
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:

```jsx
<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:

```js
function SingleProject(props) {
...
}
```

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

```js
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:

```js
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)} />
)} />
```