Question

我在不同的路线上使用了相同的组件。当路线改变时，我想要渲染组件。

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

当我将路径路径从/hotels更改为/apartments时，组件HotelsPage不会刷新。

对此有什么好处？

Answer 1

您可以通过以下方式明确传递道具，其中一种方法是：

<Route path="/hotels" component={props => <HotelsPage {...props} />} />

Answer 2

首先，您可以将路线聚合成一个类似

的路线

<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

路由更改时，react-router-dom刷新组件

2 个答案: