React Router Dom V6 中的嵌套路由

Question

我的應用程序中需要兩組路由。 一個在頂層，它在不需要身份驗證的不同頁面之間路由，另一個在經過身份驗證的區域內設置。 這是我的頂級路由組件。

function App() {
    return (
        <Router>
            <Routes>
                <Route path='/' element={<ProtectedRoute/>}>
                    <Route path='/' element={<Dashboard>
                        
                    </Dashboard>}/>
                </Route>
                <Route exact path="/sign-up" element={<SignUpPage/>}/>
                <Route exact path="/login" element={<LogInPage/>}/>
                <Route exact path="/activate-user" element={<ActivateUserPage/>}/>
                <Route exact path="/forgot-password" element={<ForgotPasswordPage/>}/>
                <Route exact path="/reset-password" element={<ResetPasswordPage/>}/>
            </Routes>
        </Router>
    );
}
export default App;

這是受保護的路線。

export const ProtectedRoute = () => {
    const auth = localStorage.getItem("xyz");
    return auth ? <Dashboard /> : <Navigate to="/login" />
}

這部分有效。 現在我需要儀表板內的路由。 這是我的儀表板組件，其中包含所需的路由。

const Dashboard = () => {
    return (
        <nav>
             <ul>
                 <li><Link to=""><AiOutlineHome/></Link></li>
                 <li><Link to=""><AiOutlineHistory/></Link></li>
                 <li><Link to=""><BsFillPlusCircleFill/></Link></li>
                 <li><Link to=""><BsChatDots/></Link></li>
                 <li><Link to=""><RiUserSettingsLine/></Link></li>
              </ul>
        </nav>
            <section>
                <Route path='/feeds' element={<HomePage/>}/>
                <Route path='/capture' element={<CaptureStoryPage/>}/>
            </section>
        </div>
    )
}

這不起作用，我得到的錯誤是：

router.ts:5 Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

我是 React 的新手，真的可以在這里使用一些幫助。 提前致謝。

Answer 1

希望您打算讓ProtectedRoute呈現Outlet而不是Dashboard組件：

export const ProtectedRoute = () => {
  const auth = localStorage.getItem("xyz");
  return auth ? <Outlet /> : <Navigate to="/login" replace />;
}

如果您需要在Dashboard組件中呈現后代路由，那么您需要做兩件事。

1. Route渲染Dashboard需要將"*"通配符匹配器附加到其路由路徑，以便可以匹配后代路由。
2. 正如錯誤指出的那樣，所有Route組件必須由Routes組件或父Route組件渲染，它們不能直接渲染。

例子：

function App() {
  return (
    <Router>
      <Routes>
        <Route element={<ProtectedRoute />}>
          <Route path='/*' element={<Dashboard />} /> // <-- match descendent routes
        </Route>
        <Route path="/sign-up" element={<SignUpPage />} />
        <Route path="/login" element={<LogInPage />} />
        <Route path="/activate-user" element={<ActivateUserPage />} />
        <Route path="/forgot-password" element={<ForgotPasswordPage />} />
        <Route path="/reset-password" element={<ResetPasswordPage />} />
      </Routes>
    </Router>
  );
}

...

const Dashboard = () => {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to=""><AiOutlineHome/></Link></li>
          <li><Link to=""><AiOutlineHistory/></Link></li>
          <li><Link to=""><BsFillPlusCircleFill/></Link></li>
          <li><Link to=""><BsChatDots/></Link></li>
          <li><Link to=""><RiUserSettingsLine/></Link></li>
        </ul>
      </nav>
      <section>
        <Routes> // <-- wrap routes in `Routes`
          <Route path='/feeds' element={<HomePage/>}/>
          <Route path='/capture' element={<CaptureStoryPage/>}/>
        </Routes>
      </section>
    </div>
  );
};