Reactjs 在url更改时，我想重新呈现我的组件，我应该怎么做

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

我在处理react时遇到过类似的问题项目

您需要在组件中使用组件WillReceiveProps功能

  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（nextrops）

下访问这个新的prop，您可以使用它调用api并获取新数据

现在，您可以保留一个公共函数，即

初始化组件（）

，并从

组件安装（）和
组件将接收props（）调用它

您的路由器将如下所示：-

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'));

ReactDOM.render((
)，document.getElementById（'app'）；

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

希望能有帮助
 反应16.3+

React now建议将数据更新移动到
componentDidUpdate
（）：

我自己在使用纯函数组件时也遇到了同样的问题，如下所示：

export default function App() {
    const history = useHistory()
    return (
        <>
            <p>current path is {history.location.pathname}</p>
            <Link to="/abc">click me</Link>
            <Link to="/xyz">click me</Link>
        </>
    )
}

导出默认函数App（）{
const history=useHistory（）
返回(
当前路径为{history.location.pathname}

点击我
点击我
)
}

单击链接时，标题栏中的URL会更新，但组件不会重新呈现（即显示的路径不会更新）

在本例中，我发现解决方案是包括对
useLocation（）
的调用。你甚至不需要对返回值做任何事情；添加此调用会使组件在位置更改时神奇地重新渲染。
您是否尝试过使用react router？github页面上的教程介绍了如何使用componentWillReceiveProps中的下一步操作功能？您可以查看任何使用react 17+的人：
componentWillReceiveProps
已被弃用，现在称为
UNSAFE\U componentWillReceiveProps
1。2.谢谢，这工作做得很好。
export default function App() {
    const history = useHistory()
    return (
        <>
            <p>current path is {history.location.pathname}</p>
            <Link to="/abc">click me</Link>
            <Link to="/xyz">click me</Link>
        </>
    )
}