Question

我有子路由，当我尝试在AppMain.js中更改路由时，它会更改url，但未渲染组件，而是重新渲染了现有组件。但是，如果我执行相同的history.push到Dashboard或BatteryTable中，则路由正常。

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文件中删除，我们只需要使用一次，作为整个应用程序的包装。

在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。这些组件将直接获取所有路由器道具。

React Router Dom未呈现子组件，但URL已更改

1 个答案: