React路由器dom不渲染子组件但url已更改

Question

我有子路由，当我试图改变AppMain.js中的路由时，它改变了url但是组件没有被渲染，而是现有的组件被重新渲染。 但是，如果我在Dashboard或BatteryTable执行相同的history.push，路由工作正常。

App.js

<Router>
  <Route exact path="/" component={withRouter(Auth)} />
  <Route path="/main" component={withRouter(AppMain)} />
</Router>

AppMain.js

constructor(props) {
    super(props)
    this.props.history.push('/main/dashboard')  
}

render() {
    return(
        <Routes match={match} />
    )
}

Routes.js

<Router>
    <Switch>
        <Route path={`${this.props.match.path}/dashboard`} component={withRouter(Dashboard)} />
        <Route path={`${this.props.match.path}/batterytable`} component={withRouter(BatteryTable)} />
    </Switch>
</Router>

Answer 1

因为你使用Router组件两次，将它从Routes.js文件中删除，我们只需要使用它一次，作为整个App的包装器。

在Routes.js文件中使用此代码：

<Switch>
    <Route path={`${this.props.match.path}/dashboard`} component={withRouter(Dashboard)} />
    <Route path={`${this.props.match.path}/batterytable`} component={withRouter(BatteryTable)} />
</Switch>

建议 ：

由于您直接使用路径路径重新授予Auth和AppMain，因此您不需要使用withRouter 。 这些组件将直接获取所有路由器道具。