Javascript React Router DOM:无法在同一页（组件）中呈现链接

考虑下面的例子，我有一个登录页面和一个管理页面。登录后，我们将被重定向到管理页面。 管理页面如下所示

所需行为：在管理组件本身中呈现cars组件

实际行为：单击汽车或自行车组件时，它们将在不同的页面上呈现

代码如下

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

//此处导入
函数App（）{
返回(
);
}

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

//此处导入
常量边栏=（）=>{
返回(
测试路线


汽车


自行车


);
};

使用react路由器dom^5.1.2

---

试过这个，但不明白我错过了什么？如何解决此问题？

将默认路由移动到堆栈底部。i、 e

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

函数应用程序（）{
返回(
);
}