reactjs - react -路由器-dom v6 : What would be the equivalent to Route's render prop?

Question

在我的 App.js 文件中，我以前能够使用以下方法呈现动态路由:

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

EpisodeDetails.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-dom v6 中，您可以创建一个包装器组件来“提取”id 匹配参数并传递指定的剧集编号。

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

...

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