React-Router-DOM：无法在同一页面（组件）中呈现链接

Question

consider the following example, I have a login page and an admin page. After logging in we will be redirected to admin page. The admin page is shown as follows.

Desired behaviour : To render cars component in the admin component itself

Actual behaviour : On clicking cars or bikes component they are being rendered on a different page.

code is as follows

App.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>
  );
};

Using react-router-dom ^5.1.2 Tried this but not able to understand what I missed? how to solve this problem?

Answer 1

Move your default route to the bottom of the stack. ie

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>
);
}