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 。 這些組件將直接獲取所有路由器道具。