带 react-router v6 的受保护路由器

Question

此受保护的路线适用于个人资料页面。 但我想为多页制作一条受保护的路线。 在我的项目中，我想为“用户个人资料更新页面”、“更新密码”和“订单详细信息页面”实施受保护的路线，但我无法实施。

ProtectedRoute.js

import React, { Fragment } from "react";
import { useSelector } from "react-redux";
import { Navigate, Route } from "react-router-dom";
import { Outlet } from 'react-router-dom';

const ProtectedRoute = () => {
  const { loading, isAuthenticated, user } = useSelector((state) => state.user);

  if (loading) return null;
  return isAuthenticated
    ? <Outlet />
    : <Navigate to="/login" replace />;
};
export default ProtectedRoute;

应用程序.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';
import Header from './components/Header/Header';
import React from 'react';
import Service from './components/Service/Service'
import Home from './components/Home/Home';
import About from './components/About/About'
import Footer from './components/Footer/Footer';
import Login from './components/User/Login';
import Cart from './components/Cart/Cart';
import ProductDetails from './components/Product/ProductDetails';
import ScrollToTop from './components/ScrollToTop/ScrollToTop';
import Signup from './components/User/Signup';
import Shipping from './components/Cart/Shipping';
import Profile from './components/User/Profile';
import store from './store';
import { loadUser } from './Actions/userAction';
import UserOptions from './components/Header/UserOptions';
import { useSelector } from 'react-redux';
import ProtectedRoute from './components/Route/ProtectedRoute';
import UpdateProfile from './components/User/UpdateProfile'
import ForgotPassword from './components/User/ForgotPassword';
import ResetPassword from './components/User/ResetPassword';
import MyOrders from './components/Order/MyOrders';

function App() {

  const { isAuthenticated, user } = useSelector((state) => state.user);

  React.useEffect(() => {
    store.dispatch(loadUser());
  }, []);

  return (
    <Router>
      <ScrollToTop />
      <Header />
      {isAuthenticated && <UserOptions user={user} />}
      <Routes>
        <Route exact path='/' element={<Home />} ></Route>
        <Route exact path='/about' element={<About />} ></Route>
        <Route exact path='/service' element={<Service />} ></Route>
        <Route exact path='/login' element={<Login />} ></Route>
        <Route exact path='/signup' element={<Signup />} ></Route>


        <Route path="/account" element={<ProtectedRoute />}>
          <Route path="/account" element={<Profile />} />
        </Route>


        <Route exact path="/password/forgot" element={<ForgotPassword />} />
        <Route exact path="/password/reset/:token" element={<ResetPassword />} />
        <Route exact path='/cart' element={<Cart />} ></Route>
        <Route exact path='/product/:id' element={<ProductDetails />} ></Route>
        <Route exact path='/shipping' element={<Shipping />}></Route>
      </Routes>
      <Footer />
    </Router>
  );
}

export default App;

我试过了，但没有用

<Route path="/account" element={<ProtectedRoute/>}>
    <Route path="/account" element={<Profile/>} /> 
    <Route path="me/update" element={<UpdateProfile/>} />
    <Route path="/orders" element={<MyOrders/>} /> 
</Route>

Answer 1

试试这个：

<Route path="/account" element={<ProtectedRoute><Profile/></ProtectedRoute>}></Route>

<Route path="me/update" element={<ProtectedRoute><UpdateProfile/></ProtectedRoute>}></Route>

Answer 2

不要用 ProtectedRoute 包装每个元素，而是立即执行

像这样使用：

<Route element={<ProtectedRoute/>}>
    <Route path="/account" element={<Profile/>} /> 
    <Route path="me/update" element={<UpdateProfile/>} />
    <Route path="/orders" element={<MyOrders/>} /> 
</Route>