使用 react-router v6 在私有路由中创建路由

Question

目前使用react-router-dom6.1.1，我正在使用private route。

在这个private route 里面，我通常有其他路线（这样我就可以在上面保留我的Sidebar）。

我的代码是这样的

// App.tsx

const RequireAuth: React.FC<PrivateRouteProps> = ({ children, redirectTo }) => {
  const isAuthenticated = Auth.isLogedIn()
  return isAuthenticated ? children : <Navigate to={redirectTo} />
}

const Page = () => {
  return (
    <div className={css.host}>
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Login />} />

          <Route
            path="/"
            element={
              <RequireAuth redirectTo="/login">
                <Home />
              </RequireAuth>
            }
          />
        </Routes>
      </BrowserRouter>
    </div>
  )
}

// Home/index.tsx

const Home = () => {
  return (
    <div className={css.host}>
      <Sidebar sections={sidebarOptions(t)} />

      <Routes>
        {routes.map(({ breadCrumbtitle, link, component }, index) => (
          <Route path={link} key={index}>
            {component ? component : <p>[{breadCrumbtitle}] To be done</p>}
          </Route>
        ))}
      </Routes>
    </div>
  )
}

所以...此设置适用于v5，但它似乎不适用于v6。 如果我在登录后仍想为所有路由保留Sidebar，我该怎么办？

Answer 1

我最终找到了解决问题的方法。 执行 Drew Reese 的建议只能在一定程度上发挥作用，因为我被引导到一条对于 react router 而言并不存在的路线。

为了让它工作，我添加了做

// App.tsx

const RequireAuth: React.FC<PrivateRouteProps> = ({ children, redirectTo }) => {
  const isAuthenticated = Auth.isLogedIn()
  return isAuthenticated ? children : <Navigate to={redirectTo} />
}

const Page = () => {
  return (
    <div className={css.host}>
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Login />} />

          <Route
            path=""
            element={
              <RequireAuth redirectTo="/login">
                <Home />
              </RequireAuth>
            }
          >
            {routes.map(({ breadCrumbtitle, link, component }, index) => {
              return <Route path={link} key={index} element={component}></Route>
            })}
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}

// Home/index.tsx

const Home = () => {
  return (
    <div className={css.host}>
      <Sidebar sections={sidebarOptions(t)} />

      <div className={css.contentContainer}>
        <Outlet />
      </div>
    </div>
  )
}

使用Outlet 似乎是必不可少的，不知道这是否是react router v6 的新功能，但似乎可以解决问题！

Answer 2

据我所知，唯一的问题是 routes 映射，Route 组件的子代无效，即您将另一个 Route 或 React.Fragment 渲染为子代。

将其移至映射的 Route 组件的 element 属性。

const Home = () => {
  return (
    <div className={css.host}>
      <Sidebar sections={sidebarOptions(t)} />
      <Routes>
        {routes.map(({ breadCrumbtitle, link, component }, index) => (
          <Route
            path={link}
            key={index}
            element={component || <p>[{breadCrumbtitle}] To be done</p>}
          />
        ))}
      </Routes>
    </div>
  );
};