React-router嵌套带有history.push的路由

Question

我有一个反应页面，可根据当前路线呈现登录页面或导航栏+容器组件。 我不希望导航栏在登录页面中可见。 因此，我的应用程序的结构如下：

index.js

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

Main.js

<Router>
  <Switch>
    <Route path="/login" component={Login} />
    <PrivateRoute path="/" component={App} />
  </Switch>
</Router>

App.js

<Router>
  <div className="App">
    <Navbar/>
    <div className="main-container">
      <Switch>
        <Route exact path="/" component={Container1}/>
        <Route path="/route1" component={Container2}/>
        <Route path="/route2" component={Container3}/>
      </Switch>
    </div>
  </div>
</Router>

现在，如果要在任何Container组件内部执行this.props.history.push（'/ login'），它只会影响最近的<Switch>，因此不会在容器区域中呈现任何内容（因为没有路由匹配）但保持导航栏可见。 如何从Main.js中获取父<Switch>来决定在程序化路线更改时呈现什么？ 我是否应该以其他方式构建应用程序？

谢谢。

Answer 1

诀窍是在App.js中删除多余的<Router>，并在文件末尾使用withRouter（App）将其导出。 感谢Nenad Vracar

Answer 2

您可以定义不同的路线集。 默认路线将始终显示您的导航栏，而其他路线则不会。

class App extends React.Component{
    render(){
        const DefaultRoutes = () => {
            return(
                <div>
                    <Navbar/>
                    <Switch>
                        <Route path="/" component={Landing} exact={true}/>          
                    </Switch>                                                                                                           
                    <Footer/>
                </div>
            )
        }

        return(
            <Provider store={store}>
                <BrowserRouter>
                    <div className="App">
                        <Switch>
                            <Route path="/alternate" component={alternateComponent} exact/>
                            <Route component={DefaultRoutes}/>
                        </Switch>
                    </div>
                </BrowserRouter>
            </Provider>
        )
    }
}

因此，使用此设置，您可以看到DefaultRoutes将始终使用导航栏。 但是，路径为“备用”的Route则不是这样。 本质上，只需将要具有“正常”显示行为的路由包装在DefaultRoutes中即可。 并定义该集合之外的任何其他路径。 这要归功于Switch，它将独家渲染路线。