Как отделить содержимое домашней страницы от остальных страниц в реагирующем маршрутизаторе?

Question

Я пытаюсь создать приложение реакции с несколькими страницами, каждая из которых действительно имеет разный контент.Я использовал (или, по крайней мере, пытался, потому что, я думаю, в этом причина всего беспорядка), реагировал маршрутизатор.Я хотел поместить все ссылки в навигационную панель начальной загрузки.Проблема в том, что когда я перехожу на другую страницу с домашней страницы, содержимое с домашней страницы повторно отображается над содержимым с других страниц.Допустим, моя домашняя страница возвращает «Домой» и о возвратах «О нас», затем появятся вкл / о «Доме» и «О нас». Как я могу это исправить?

Navbar.js:

function Navigation() {
  const [collapsed, setCollapse] = useState(false);

    return (
      <Navbar className="navbar navbar-expand-lg navbar-dark" light expand="md" sticky="top">
        <NavbarBrand href="/">Home</NavbarBrand>
        <NavbarToggler onClick={changeCollapse} className="ml-auto" />
        <Collapse isOpen={collapsed} navbar>
        <Nav className='mr-auto' navbar>
            <NavItem>
                <NavLink href="/about" className="active">About</NavLink>
            </NavItem>
          </Nav> 
        </Collapse>
      </Navbar>
    )

App.js:

...
import {Route, BrowserRouter} from "react-router-dom";
...
function App() {
  return (
      <div>
        <BrowserRouter>
          <Route path='/' component={Home}/>
          <Route path='/about' component={About}/>
        </BrowserRouter>
      </div>
  );
}

Answer 1

Вы должны использовать 'Switch' и exact с маршрутами, подобными этому

...
import {Route, BrowserRouter, Switch} from "react-router-dom";
...
function App() {
  return (
      <div>
        <BrowserRouter>
          <Switch>
           <React.Fragment>
             <Route exact={true} path='/' component={Home}/>
             <Route exact={true} path='/about' component={About}/>
           <React.Fragment>
          </Switch>
        </BrowserRouter>
      </div>
  );
}