Question

这是我要创建的布局

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}/>更改为top即可使所有操作完美地运行

<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"

Answer 1

WHERE的预期行为是仅呈现一条匹配的路由。仅将互斥的路由放入其中。阅读您的问题，我认为路线并非完全独立。例如。 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组件将呈现的共享内容。

React Routes v4根据索引而有所不同

1 个答案: