javascript 路由改变时react-router-dom刷新组件

6mw9ycah  于 2023-01-24  发布在  Java
关注(0)|答案(3)|浏览(169)

我使用相同的组件为不同的路线。当路线改变,我希望组件被渲染。

<Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/hotels" component={HotelsPage} />
    <Route path="/apartments" component={HotelsPage} />
</Switch>

当我将路由路径从/hotels更改为/apartments时,组件HotelsPage不刷新。
对此,最酷的方法是什么?

2sbarzqh

2sbarzqh1#

排序的方法之一是显式传递props,如下所示:
<Route path="/hotels" component={props => <HotelsPage {...props} />} />

xpcnnkqh

xpcnnkqh2#

首先,您可以将路径聚合为一个类似

<Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/(hotels|apartments)" component={HotelsPage} />
</Switch>

其次,HotelsPage组件在/hotels/apartments上呈现,这与路径参数的情况类似,由此组件不会在路径改变时再次安装,而是更新,从而调用componentWillReceiveProps生命周期函数,
我们可以像这样实现componentWillReceiveProps

componentWillReceiveProps(nextProps) {
    if (nextProps.location.pathname !== this.props.location.pathname) {
      console.log("here");
      //take action here
    }
  }

DEMO

6l7fqoea

6l7fqoea3#

我想只需传递useLocation().pathname即可解决问题

useEffect(
    () => {
         // Your logics
        });
    }, [useLocation().pathname])

相关问题