gpt4 book ai didi

reactjs - react 路由器,如何在 url 更改时刷新页面?

转载 作者:行者123 更新时间:2023-12-04 17:11:26 25 4
gpt4 key购买 nike

我正在制作一个电影应用程序,其中每部电影都有自己的专用页面。在这个页面上,我提供了可以点击的类似电影,理想情况下会带你到它自己的电影页面。我有一条看起来像这样的路线<Route name="movie" path="/movie/:movieID" exact ><MoviePage /></Route>这条路线的链接在我创建的每个电影组件中。问题是,当我单击类似电影时,url 会更改为类似电影的 url,并且我能够在开发人员控制台中访问类似电影的属性,但是页面本身不会更改。但是一旦刷新页面的内容就会更改为与 url 对应的内容。
我找不到强制刷新页面以显示新电影信息的方法。

最佳答案

问题很可能是MoviePage组件需要对 movieID 使用react路由参数更新。
给定路线:

<Route name="movie" path="/movie/:movieID"  exact>
<MoviePage />
</Route>
电影页面:
使用 useEffect基于 movieID 处理任何逻辑/数据获取/等的钩子(Hook)参数更新。
const { movieID } = useParams();

React.useEffect(() => {
// movieID on initial render or subsequent render when updated
// logic to use movieID and resynchronize any data.
}, [movieID]);
如果仍在使用类组件,则使用 componentDidUpdate生命周期方法。 (假设 MoviePage 包裹在 withRouter HOC 中以接收路由 Prop ,特别是 match Prop )
componentDidUpdate(prevProps, prevState) {
if (prevProps.match.params.movieID !== this.props.match.params.movieID) {
// logic to use movieID and resynchronize any data.
}
}

关于reactjs - react 路由器,如何在 url 更改时刷新页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69340833/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com