Question

我有这段代码：

class Base extends Component {
  changeRoute = () => {
    // after this, address bar gets updated but I can't see the Users
    // component, only Home component.
    this.props.history.push('/users');
  }

  render() {
    return (
      <div>
        <MyBar />
        {this.props.children}
      </div>
    )
  }
}

class App extends Component {
  render() {
    return (
      <Router>
        <Base>
          <a onClick={this.changeRoute}>Change</a>
          <Route path="/home" component={Home} />
          <Route path="/users" component={Users} />
        </Base>
      </Router>
    )
  }
}

但是，当我尝试通过使用history.push或者反击路由器还原来推送更改位置时，我可以看到浏览器路径已更新，但内容未更新，它显示原始路径内容。我还注意到，每当我刷新浏览器时，我都能看到与路径相关的正确内容。

当我将代码更改为以下内容时，浏览器路径和内容都按预期相应更新，我的问题是：为什么它的行为不同？如果在我看来两个代码都做同样的事情。

class Base extends Component {
  render() {
    return (
      <MyBar />
    )
  }
}

class App extends Component {
  changeRoute = () => {
    // after this, address bar and component are updated as expected.
    this.props.history.push('/users');
  }
  render() {
    return (
      <Router>
        <div>
          <Base />
          <a onClick={this.changeRoute}>Change</a>
          <Route path="/home" component={Home} />
          <Route path="/users" component={Users} />
        </div>
      </Router>
    )
  }
}

修改我在源代码中添加了push方法。这是我用来导出App组件的一段代码：

import {withRouter} from 'react-router';

export default withRouter(App);

Answer 1

这是我运行的代码，运行正常。您能否检查我的代码中是否有任何需要更改的内容才能重现您的问题？

import React from 'react';
import ReactDOM from 'react-dom';
import {NavLink, BrowserRouter,Route} from 'react-router-dom';
class Base extends React.Component {
    render() {
      return (
        <div>
          <div>MyBar</div>
          {this.props.children}
        </div>
      )
    }
  }

  class App extends React.Component {
    render() {
      return (
        <BrowserRouter>
          <Base>
            <NavLink to="/users">Change</NavLink>
            <Route path="/home" render={()=>"Home"} />
            <Route path="/users" render={()=>"Users"} />
          </Base>
        </BrowserRouter>
      )
    }
  }

ReactDOM.render(<App />, document.getElementById('root'));

编辑：根据我的理解，您希望能够在点击更改链接时导航到用户页面。正确的方法是使用NavLink控件。这不需要使用withRouter HOC，它只能在路由器组件内使用而不能在其外部使用。

在history.push上使用children prop时，React路由器4不会更新

1 个答案: