嵌套路由在我的管理儀表板的 react router dom 中不起作用

Question

我有一個管理儀表板，我成功地實現了它的嵌套路由，但它不呈現頁面。 當我點擊它顯示這個 它更改 URL 但不呈現頁面

我如何解決這個問題，如果有人知道請告訴我

App.js

 <Router> <Navbar /> <Routes> <Route exact path="/" element={<Home />} /> <Route exact path="/service" element={<Service />} /> <Route exact path="/contact" element={<Contact />} /> <Route exact path="/login" element={<Login />} /> <Route exact path="/reset" element={<Reset />} /> <Route exact path="/reset/:token" element={<Newpassword />} /> {/* Redirect to their dashboard */} <Route exact path="/employee" element={<Employee />} /> <Route exact path="/publisher" element={<Publisher />} /> {/* admin pages */} <Route path="/admin" element={<Admin />}> <Route path="/admin/project" element={<Project />} /> <Route path="/admin/user" element={<User />} /> </Route> </Routes> </Router>

Admin.js

 import React from 'react' import { CDBSidebar, CDBSidebarContent, CDBSidebarHeader, CDBSidebarFooter, CDBSidebarMenu, CDBSidebarMenuItem } from "cdbreact" import { NavLink, Outlet } from 'react-router-dom'; import "./AllStyle.css" const Admin = () => { return ( <div> <div style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}> <CDBSidebar textColer="#fff" backgroundColor="rgb(0,7,61)"> <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}> <h4>Admin</h4> </CDBSidebarHeader> <CDBSidebarContent className="sidebar-content"> <CDBSidebarMenu> <NavLink to="/admin/user"> <CDBSidebarMenuItem icon="portrait"> ALL USER </CDBSidebarMenuItem> <hr></hr> </NavLink> <NavLink to="/admin/project"> <CDBSidebarMenuItem icon="file-contract"> Add Project </CDBSidebarMenuItem> <hr></hr> </NavLink> <NavLink to="/login"> <CDBSidebarMenuItem icon="sign-out-alt"> Logout </CDBSidebarMenuItem> <hr></hr> </NavLink> </CDBSidebarMenu> </CDBSidebarContent> <hr></hr> <CDBSidebarFooter style={{ textAlign: 'center' }}> <div className="sidebar-btn-wrapper" style={{ padding: '20px 5px' }}> Evalue Content portal </div> </CDBSidebarFooter> </CDBSidebar> </div> <Outlet /> //using Outlet to render the child component </div> ) } export default Admin

我想實現它，如果單擊用戶然后在管理儀表板內呈現用戶組件

更新：

實施<Outlet/>后，URL 已更改但未顯示子組件的內容但我在控制台中看到錯誤。

Warning: Failed prop type: ForwardRef: prop type `toggled` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.

如果有人知道請告訴我如何解決這個錯字錯誤

更新 2：

使用<Outlet > 后它起作用了，但一個問題是管理菜單下方顯示的子內容

你能告訴我如何解決這個問題嗎

Answer 1

我會看看像這樣做你的嵌套路線

<Route  path="admin" element={<Admin />}>
    <Route  path="project" element={<Project />} />
    <Route  path="user" element={<User />} />
</Route>

我也看不到，但似乎您可能沒有顯示嵌套路線的<Outlet> 。

應該在父路由元素中使用<Outlet>來呈現它們的子路由元素。 這允許在呈現子路由時顯示嵌套 UI。 如果父路由完全匹配，它將呈現一個子索引路由，如果沒有索引路由，則不呈現任何內容。

• 嵌套路由
• 使用插座

Answer 2

問題

Admin組件似乎缺少用於嵌套路由的Outlet組件，或者路由需要取消嵌套，因為它們使用的是絕對路徑。

解決方案

使用扁平的路由列表，即沒有Route組件的嵌套

如果使用絕對路徑，只需取消嵌套其他管理路由。

{/* admin pages */}
<Route path="/admin" element={<Admin />} />
<Route path="/admin/project" element={<Project />} />
<Route path="/admin/user" element={<User />} />

使用嵌套的Route組件和一個Outlet組件來渲染它們

如果想要嵌套路由，則Admin組件必須渲染一個Outlet組件，以便將嵌套路由渲染到其中。

import React from 'react';
import {
  CDBSidebar,
  CDBSidebarContent,
  CDBSidebarHeader,
  CDBSidebarFooter,
  CDBSidebarMenu,
  CDBSidebarMenuItem
} from "cdbreact";
import { NavLink, Outlet } from 'react-router-dom'; // <-- import Outlet
import "./AllStyle.css";

const Admin = () => {
  return (
    <>
      <div>
        <div style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}>
          <CDBSidebar textColer="#fff" backgroundColor="rgb(0,7,61)">
            <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
              <h4>Admin</h4>
            </CDBSidebarHeader>
            <CDBSidebarContent className="sidebar-content">
              .....
            </CDBSidebarContent>
            <hr></hr>
            <CDBSidebarFooter style={{ textAlign: 'center' }}>
              .....
            </CDBSidebarFooter>
          </CDBSidebar>
        </div>
      </div>
      <Outlet /> // <-- render Outlet for nested routes
    </>
  )
}

export default Admin;

• 如果使用絕對路由：

   {/* admin pages */} <Route path="/admin" element={<Admin />}> <Route path="/admin/project" element={<Project />} /> <Route path="/admin/user" element={<User />} /> </Route>

• 如果使用相對路由，則省略前導"/"字符並調整嵌套路徑。

   {/* admin pages */} <Route path="/admin" element={<Admin />}> <Route path="project" element={<Project />} /> <Route path="user" element={<User />} /> </Route>