React Router V6路由[重复]

Question

我正在尝试使用新发布的路由器实现 PrivateRoute 逻辑，但它似乎无法按预期工作..

import { Route, Routes, Navigate } from "react-router-dom";

import LogInPage from "./pages/LogIn";
import DashboardPage from "./pages/Dashboard";

function PrivateRoute({ path, element }) {
  const auth = true;

  return (
    <Route
      path={path}
      element={auth === true ? element : <Navigate replace to="/login" />}
    />
  );
}

function App() {
  return (
    <Routes>
      <Route path="/*" element={<PageNotFound />} />
      <Route path="/" element={<Navigate replace to="/dashboard" />} />
      <Route path="/login" element={<LogInPage />} />
      <PrivateRoute
        path="/dashboard"
        element={<DashboardPage />}
      />
    </Routes>
  );
}

export default App;

我错过了什么？如果 PrivateRoute 组件返回 Route，它是否仍然是 Route 组件？

Answer 1

You cannot composeRoutes 在 React Router v6 中。相反，在与其他路由相同的级别创建路由，并在 element 属性中使用您的 PrivateRoute 组件。示例（source）：

import { Routes, Route, Navigate } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/public" element={<PublicPage />} />
      <Route
        path="/protected"
        element={
          // Good! Do your composition here instead of wrapping <Route>.
          // This is really just inverting the wrapping, but it's a lot
          // more clear which components expect which props.
          <RequireAuth redirectTo="/login">
            <ProtectedPage />
          </RequireAuth>
        }
      />
    </Routes>
  );
}

function RequireAuth({ children, redirectTo }) {
  let isAuthenticated = getAuth();
  return isAuthenticated ? children : <Navigate to={redirectTo} />;
}

Answer 2

React V6 中的路由

1. 用于在网站中有多个页面的情况下进行导航。我们不需要重新渲染整个网站来导航到不同的页面 每次，向服务器发出 fetch 请求。
2. 整个 javascript 一次被 fecthed，然后由 react-router-dom 管理，用于导航的第三方库。

   //npm install react-router-dom
   
   <BrowserRouter>
     <Routes>
       <Route path='' element='' exact> //exact is used to load only the specified matched path
       <Route path='' element=''>
        .
        . 
     </Routes>
   </BrowserRouter>

1. 重定向：- 将路径重定向到现有路径。

       import { Routes,Routes,Navigate } from 'react-router-dom'
       <Routes>
          <Route path='/learn' element={<Learn/>}/>
          <Route path='/learn-apps' element={<Navigate replace to="/learn"/>}/>
       </Routes>     
   

2. 从路由路径中提取参数：-

           //define a path like this
           <Route path=":courseid" element={<CourseId/>}/>
   
           //In the component use react router hook 
           function CourseId(){
             let {courseid} = useParams();
             return (
               <div>
                 <h1>Your Course Id is : {courseid}</h1>
               </div>
             );
           }
   
   

3. 将信息从一条路线传送到另一条路线。
   • 对于这个功能，我们必须使用两个钩子，即 useNavigate,useLocation
   • 假设我们将信息从 courseId 组件传送到 Dashboard ，此后路线已更改，因此要传递一些信息：-
   • 在这里，每当用户单击 courseId 组件上的按钮到新路由（即仪表板）时，我们都会传递一个包含价格的对象

   • 
        function CourseId(){
          //useNavigate is imported from react-router-dom
          let navigate = useNavigate();
          let {courseid} = useParams();
          return (
              <div>
                <h1>Your Course Id is : {courseid} </h1>
                <button
                  onClick={() => {
                    navigate("/dashboard",{ state: {
                      price : "399"
                    } });
                  }}
                >Pass information</button>
              </div>
            );
          }
     
          function Dashboard(){
              const location = useLocation();
              return(
                <div>
                  <h1>Info that I got here is {location.state.price} </h1>
                </div>
              );
            }
     

     • 另一种简单的方法是使用链接

     • 
          //Route intial
          <Link to="/dashboard" state={"DJANGO"}>Dashboard</Link>
       
          //Route final
          const location = useLocation();
          <h1>Info that I got here is {location.state} </h1>
       

Sources : Youtube