基于 url ID 和 React Router V6 的动态视图

Question

我正在开发一个显示电影列表的电影应用程序，当您单击某部电影时，它会打开电影视图，其中包含有关该电影的更多信息。目前，我学习了如何使用旧版本的 React Router 来完成它，它是这样的（我也在使用 bootstrap）：

<Route path="/movies/:movieId" render={({ match }) => {
  return 
   <Col md={8}>
     <MovieView movie={movies.find(m => m._id === match.params.movieId)} 
   </Col>
}}/>

MovieView 根据 URL 请求的电影作为 Bootstrap 卡片元素呈现电影。我想继续使用相同的概念，但将其更新为 React Router V6。我知道他们删除了像 match 这样的 Route 道具，但我想知道我是否仍然可以在新版本中继续这种动态。

我能够更新显示我数据库中所有电影的主页，V6 代码如下所示：

<Route exact path="/" element={
   movies.map(m => (
      <Col md={3} key={m._id}>
         <MovieCard movie={m} />
      </Col>
    ))
} />

但是，由于 MovieView 需要 URL 来匹配 ID，所以它不起作用，因为我需要定义 match。

如果有人知道解决此问题的方法，我将非常高兴。非常感谢！

Answer 1

您可以创建一个包装器组件来通过 useParams 挂钩读取 movieId 路由路径参数，进行过滤，并传递 movie 属性。

示例：

import { useParams } from 'react-router-dom';

...

const MovieWrapper = () => {
  const { movieId } = useParams();

  return (
    <Col md={8}>
      <MovieView movie={movies.find(m => m._id === movieId)} />
    </Col>
  );
};

...

<Route path="/movies/:movieId" element={<MovieWrapper />} />

基于 url ID 和 React Router V6 的动态视图

Dynamic views based on url ID with React Router V6

reactjs

react-router

react-router-dom