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

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 路由器的预期行为。

虽然我建议您创建一个 HOC 来从不同位置获取数据并通过 props 将其传递到 PostTypePageContainer，但使用 key 可以让您快速解决问题，从而导致组件重新安装.

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