如何重新渲染在不同路线中使用的相同组件？

Question

我有多个渲染相同组件的路由。根据我希望组件获取不同数据的路线。但是，由于我一直渲染相同的组件，所以当我单击链接标记（从位于布局组件中的导航栏）到另一个渲染相同组件的路由时，React 看不到 DOM 的任何更改。这意味着组件不会使用新数据重新渲染。这是我的路线：

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Provider store={store}>
          <Layout>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/fashion" component={PostTypePageContainer} />
              <Route exact path="/beauty" component={PostTypePageContainer} />
            </Switch>
          </Layout>
        </Provider>
      </BrowserRouter>
    );
  }
}
export default App;

这是我每次都想用新数据重新渲染的 PostTypePageContainer 组件：

class PostTypePageContainer extends Component {
  componentDidMount() {
    let route;
    switch (this.props.location.pathname) {
      case '/fashion':
        route = '/fashion';
        break;
      case '/beauty':
        route = '/beauty';
        break;
      default:
        console.log('No data was found');
    }

    let dataURL = `http://localhost:8888/my-site//wp-json/wp/v2${route}?_embed`;
    fetch(dataURL)
      .then(res => res.json())
      .then(res => {
        this.props.dispatch(getData(res));
      });
  }

  render() {
    let posts = this.props.postData.map((post, i) => {
      return <PostTypePage key={i} props={post} />;
    });
    return <div>{posts}</div>;
  }
}

const mapStateToProps = ({ data }) => ({
  postData: data.postData
});

export default connect(mapStateToProps)(PostTypePageContainer);

如何每次都重新渲染该组件？

Answer 1

这是 react-router 的预期行为。

虽然我建议您创建一个 HOC 以从不同位置获取数据并通过 props 将其传递给PostTypePageContainer，但使用密钥可以让您快速解决问题，这将导致您的组件重新挂载。

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Provider store={store}>
          <Layout>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact key={uniqueKey} path="/fashion" component={PostTypePageContainer} />
              <Route exact key={someOtherUniqueKey} path="/beauty" component={PostTypePageContainer} />
            </Switch>
          </Layout>
        </Provider>
      </BrowserRouter>
    );
  }
}
export default App;

来源：https://github.com/ReactTraining/react-router/issues/1703

Answer 2

我无法让 在我的情况下工作。在尝试了几种不同的方法之后，对我有用的一种方法是在重用组件中使用 componentWillReceiveProps 函数。每次从

调用组件时都会调用它

在我的代码中，我做到了：

componentWillReceiveProps(nextProps, nextContext) {

    // When we receive a call with a new tag, update the current
    // tag and refresh the content
    this.tag = nextProps.match.params.tag;
    this.getPostsByTag(this.tag);
}