React Routes v4 ведет себя по-разному в зависимости от индекса

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 made allthigg прекрасно работает

<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

Предполагаемое поведение для 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.