React-Router-DOM: невозможно отобразить ссылку на той же странице (компоненте)

Question

рассмотрим следующий пример, у меня есть страница входа и страница администратора. После входа мы будем перенаправлены на страницу администратора. Страница администратора отображается следующим образом.

Требуемое поведение : для визуализации компонента автомобилей в самом компоненте администратора

Фактическое поведение : при нажатии компонента «автомобили или велосипеды» они отображаются на другой странице.

код выглядит следующим образом

Приложение. js

//imports here
function App() {
return(
 <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/admin" component={Admin} />
          <Route exact path="/cars" component={Cars} />
          <Route exact path="/bikes" component={Bikes} />
        </Switch>
      </Router>
);
}

Admin. js

//imports here
const Admin = () => {
  return (
    <Fragment>
      <div className="is-flex">
        <Sidebar />
        <Navbar />
      </div>
    </Fragment>
  );
};

navbar. js

// imports here
const Sidebar = () => {
  return (
    <aside className="aside">
      <p className="menu-label">Test Routes</p>
      <ul className="menu-list">
        <li>
          <Link to="/cars">Cars</Link>
        </li>
        <li>
          <Link to="/bikes">Bikes</Link>
        </li>
      </ul>
    </aside>
  );
};

Использование response-router-dom ^ 5.1.2 Попробовал это, но не смог понять, что я пропустил? как решить эту проблему?

Answer 1

Переместите маршрут по умолчанию в конец стека. т.е.

function App() {
 return(
   <Router>
        <Switch>
          <Route path="/admin" component={Admin} />
          <Route path="/cars" component={Cars} />
          <Route path="/bikes" component={Bikes} />
          <Route exact path="/" component={Login} />
        </Switch>
   </Router>
);
}