React 路由动态页面内容显示 RRDV5

Question

我对 reactJS 比较陌生，我正在尝试用 react 构建一个仪表板。目前我已经建立了几个身份验证 routes/pages 但我面临着关于 routing/dynamic 页面内容的挑战。

我希望屏幕上的某些组件保持不变，而其他一些组件发生变化。例如，第一页是登录页面。在这个页面上，我只有表格；电子邮件字段、密码字段和提交按钮与忘记密码页面和重设密码页面相同。但是当用户登录时我想显示仪表板（这就是我想要动态组件更改的地方）。

在仪表板上，我希望 Appbar 和 Drawer 保持不变，而中间的内容会根据用户的选择而变化，无论是设置、汽车、用户等，它们都将是 Drawer 上的 Listitems。

目前我的路由设置如下

<Router>
 <Routes>
  <Route path="/" element={<Login />} />
  <Route path="/reset/:id" element={<ResetPassword/>}/>
  <Route path="/forgotten-password" element={<ForgottenPassword/>}/>
  <Route path="/dashboard" element={<Dashboard/>}/>
 </Routes>
</Router>

顺便说一句，我正在使用react-router-dom v5

Answer 1

如果你想让 navbar 和 drawer 始终可见，你可以将组件放在 routes.

之外

所以我会为 navbar 定义一个组件并将其放在 Routes 之前的顶部：

<Router>
{session && <Navbar />}
 <Routes>
  <Route path="/" element={<Login />} />
  <Route path="/reset/:id" element={<ResetPassword/>}/>
  <Route path="/forgotten-password" element={<ForgottenPassword/>}/>
  <Route path="/dashboard" element={<Dashboard/>}/>
 </Routes>
</Router>

React 路由动态页面内容显示 RRDV5

React Routing an Dynamic Page content display RRDV5

reactjs

react-router-dom

react-router-v4