reactjs - 在 url 更改时，我想重新渲染我的组件，我应该怎么做

Question

我有两个获取示例组件的链接，但是当我单击其中任何一个时，它会被加载，而当我单击另一个链接时，它不会重新渲染，只会更改 url。我想在两次链接点击时重新渲染组件。有什么办法可以做到吗？

Answer 1

当我从事 React 项目时，我曾经遇到过类似的问题。

您需要在组件中使用componentWillReceiveProps函数。

  componentWillReceiveProps(nextProps){
     //call your api and update state with new props
  }

更新

对于 React 16.3+ 版本，请使用 componentDidUpdate

componentDidUpdate (prevProps, prevState) {
  // update state 
}

为了让组件第一次加载时更清楚，通过调用 url www.example.com/content/a 来运行 componentDidMount() 。

现在，当您单击另一个链接(例如 www.example.com/content/b)时，会调用相同的组件，但这次 prop 会发生变化，您可以在 componentWillReceiveProps(nextProps) 下访问这个新的 prop，您可以用于调用api并获取新数据。

现在您可以保留一个常用函数，例如 initializeComponent() 并从 componentDidMount() 和 componentWillReceiveProps() 调用它

你的路由器看起来像这样:-

ReactDOM.render((
     <Router history={browserHistory}>
      <Route path="/content" component={app}>
        <IndexRoute component={home}/>
        <Route path="/content/:slug" component={component_name} />
      </Route>
    </Router>
), document.getElementById('app'));

所以现在当您调用 www.example.com/content/a 时，a 将被视为 slug。在该组件中，如果您调用 www.example.com/content/b ，则 b 将被视为 slug，并可作为 componentWillReceiveProps 中的 nextProps 参数使用。

希望对你有帮助!!