React Router-如何从一个动态路由中获取数据

当你使用带有动态参数的React Router时，一个非常常见的需求是获取我们需要在页面中显示的数据。

例如，我们有一个项目列表，点击它可以进入项目的细节，URL是/project/PROJECT_ID 。

我发现有两种方法可以做到这一点。

一种是以这种方式来声明路由。

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

注意/project/:id 路径。这意味着该组件将看到id 参数中的动态部分。

现在在SingleProject组件中，我们可以使用useParams 钩子来访问id 参数。

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

//...

const { id } = useParams()

在我的例子中，我使用这个id ，从一个数组的项目中过滤出数据，但你可以查询数据库或用它做任何你想做的。

另一种方法是使用props。

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

在SingleProject 组件中，负责显示数据的那个组件（正如我在上面的render 道具中列出的那样），我们使用我们传递的props 。

function SingleProject(props) {
...
}

那些道具包含了match.params 属性下的参数，所以我们可以使用对象重构来取回我们的id 。

const { id } = props.match.params

match 在内联渲染的路由中也可用，有时很有用，因为我们可以在渲染组件之前使用 参数在我们的数据源中查找帖子数据。id

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