在我的 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 与我要实现的目标有什么等价物?文档并没有说得很清楚。
最佳答案
奇怪的是,您在 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} />}
/>
关于reactjs - react -路由器-dom v6 : What would be the equivalent to Route's render prop?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70827930/