时间戳

首页 > 解决方案 > 如果我的基本路由相同，histroy.push() 在反应路由器中不起作用

reactjs - 如果我的基本路由相同，histroy.push() 在反应路由器中不起作用

问题描述

我看到了很多问题，但没有得到答案。当我history.push('/user')打开时'/dashboard'，它工作得很好，因为我的基本路线不同，即user!=dashboard。但是当我在路上'/user'，现在我想去history.push('/user/87')。这里发生了奇怪的事情，因为基本路由相同user===user，我的 url 更改但我的组件没有再次呈现。我使用了<Link>react-router-dom 提供的东西，但它也不起作用。

这是我的根本问题，

import { BrowserRouter } from 'react-router-dom'; //"^5.0.1"

ReactDOM.render((
  <Provider store={store}>
    <BrowserRouter>
      <AppContainer />
    </BrowserRouter>
  </Provider>
), document.getElementById('root'));

请提供解决方案，这将是很大的帮助。

标签： reactjsreact-router-dom

解决方案

我和我的同事发现了一个技巧，我们可以使用getDerivedStateFromProps和componentDidUpdate生命周期

state = {
  currentUrl: this.props.match.url,
}

static getDerivedStateFromProps(props, state) {
    let updatedState = {};

    if (props.match.url !== state.currentUrl) {
      updatedState.currentUrl = props.match.url;
    }

    return updatedState;
  }

  componentDidUpdate(prevProps) {
    if (prevProps.match.url !== this.state.currentUrl) {
      // re-initiate your state so that it can run your render lifecycle
      this.setInitialState(); 
    }
  }

我们还可以通过提供第二个参数来使用useEffect钩子，[this.props.match.url]这样当您的 url 更新时，您可以设置您的状态。

推荐阅读