Реагировать на маршрутизатор, отображающий несколько компонентов одновременно

Question

Я пытаюсь использовать несколько маршрутов, поэтому я могу перенаправить с одного маршрута на другой, но каждый раз, когда я добавляю другой маршрут, основное приложение одновременно отображает стили и компоненты, я пробовал lazyLoad, Switch и для добавления "точного" в путь маршрута

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

import HomePage from './components/homePage/homePage';
 import SignInForm from './components/signInForm/signInForm';


function App() {
  return (
 <div>
  <Router>
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route exact path="/Sign-In" component={SignInForm} />
  </Switch>
   </Router>
 </div>
  );
}



export default App;

Answer 1

В вашем случае, я думаю, вам следует использовать другой порядок ваших компонентов:

<Switch>
    <Route path="/Sign-In" component={SignInForm} />
    <Route path="/" component={HomePage} />
</Switch>

Switch проверяет маршруты сверху и снизу, в вашем случае оба являются «точными», поэтому отображается оба.

Вам даже не нужно точное, если вы соблюдаете правильный порядок путей.