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来从不同位置获取数据并通过道具将其传递给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);
}

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

2 个答案: