Javascript 使用history.push响应路由器嵌套路由

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

index.js

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

ReactDOM.render（，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>

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

---

谢谢。

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

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>
        )
    }
}

类应用程序扩展了React.Component{
render（）{
const DefaultRoutes=（）=>{
返回(
)
}
返回(
)
}
}

因此，通过此设置，您可以看到DefaultRoutes将始终使用Navbar。

---

但对于路径为“alternate”的路由，情况并非如此。本质上，只需包装您希望在DefaultRoutes中具有“正常”显示行为的路由。并定义该集合之外的任何其他路由。这要归功于Switch，它将以独占方式呈现路由。

诀窍是删除App.js中多余的，并在文件末尾使用withRouter（App）导出它。谢谢尼纳德·弗拉卡尔，这在这里没什么用。withRouter在使用Route组件的组件道具时，为已经存在的组件添加了功能。我想我在这里犯了一个错误。尝试删除应用程序上的路由器包装，并使用路由器的

。这完全符合我的要求。所以，如果我理解正确的话，我正在创建另一个我在这里不需要的路由器。谢谢我将从中创建一个答案并感谢您。就在昨天，我也遇到了同样的问题，这篇文章帮助我为链接欢呼！