时间戳

首页 > 解决方案 > React Routes v4 的行为因索引而异

reactjs - React Routes v4 的行为因索引而异

问题描述

这是我想要创建的布局

Login => '/login'
Main  => '/'
      => Home => '/'
      => Pageone = '/pageone'
      => Pagetwo = '/pagetwo'

这是我试图这样做的代码

<BrowserRouter>  
  <Switch> 
      <Main> 
         <Route exact path='/' component={Home} /> 
         <Route path='/pageone' component={PageOne}/> 
         <Route path='/pagetwo' component={PageTwo}/>   
      </Main>
     <Route path="/login" component={Login}/>
  </Switch>  
</BrowserRouter>

虽然不使用Switch嵌套路由效果很好，但Main即使Login在使用exact. 使用时Switch，导航到嵌套路由显示空白页面，但外部路由运行良好。

但是只需将顶部更改<Route path="/login" component={Login}/>为顶部即可使everythigg 完美运行

<BrowserRouter>  
  <Switch> 
     <Route path="/login" component={Login}/>
     <Main> 
         <Route exact path='/' component={Home} /> 
         <Route path='/pageone' component={PageOne}/> 
         <Route path='/pagetwo' component={PageTwo}/>   
      </Main>
  </Switch>  
</BrowserRouter>

这是预期的行为还是错误？

Main组件内容

<div>
   <NavBar ></NavBar>  
   {this.props.children} 
   <FooTer></FooTer>
</div>

这是我的依赖项

"bootstrap": "^4.2.1",
"classnames": "^2.2.6",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-materialize": "^2.6.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.3"

标签： reactjsreact-router-v4

解决方案

的预期行为Switch是只渲染一个匹配的路由。仅将互斥路线放入其中。阅读您的问题，我认为这些路线并不完全独立。例如，路线中存在的一些内容可能/也需要在其他路线中显示。要做到这一点，你可以试试这个 -

<BrowserRouter>
  {/* Shared content in this route. This is always matched and rendered. */}
  <Route path="/" component={SharedChrome} />
  <Switch>
    <Route path="/" component={Home} />
    <Route path='/pageone' component={PageOne}/> 
    <Route path='/pagetwo' component={PageTwo}/>
    <Route path="/login" component={Login}/>
  </Switch>
</BrowserRouter>

并修改内部路由的组件中的内容，Switch使其不具有将由SharedChrome组件呈现的共享内容。

推荐阅读