作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在制作一个电影应用程序,其中每部电影都有自己的专用页面。在这个页面上,我提供了可以点击的类似电影,理想情况下会带你到它自己的电影页面。我有一条看起来像这样的路线<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/
我是一名优秀的程序员,十分优秀!