react-router-dom v6：什么相当于路由的渲染道具？

Question

在我的App.js文件中，我以前能够使用以下方法渲染动态路由：

<Route exact path="/episodes/:id" render={(props) => {
const episodeNumber = props.location.pathname.replace('/episodes/', '');
return (
<EpisodeDetails episode={this.state.episodes[episodeNumber]} />
);
}}/>

剧集详情.js

const EpisodeDetails = (props) => {
return (
<div className="Episode">
<h2><span>Episode {props.episode.id}: </span>{props.episode.title}</h2>
<p>{props.episode.description}</p>
<audio controls>
<source src={props.episode.source} type="audio/mp3" />
</audio>
</div>
);
};
export default EpisodeDetails;

但从 V6 开始，这种方法不再有效。URL 路径名已正确更新(即/episodes/2)，但组件不会为路径呈现。

V6 相当于我想要完成的是什么？文档对此不是很清楚。

Answer 1

奇怪的是，您在 v5 代码中为剧集编号声明了一个路由匹配参数，然后没有使用它。在react-router-domv6 中，您可以创建一个包装器组件来"啜饮"id匹配参数并传递指定的集数。

const EpisodeWrapper = ({ episodes }) => {
const { id } = useParams();
<EpisodeDetails episode={episodes[id]} />
}

。

<Route
path="/episodes/:id"
element={<EpisodeWrapper episodes={this.state.episodes} />}
/>