React Private Routes 没有被重定向并且它们不存在

Question

我遇到了关于专用路由的问题，而且没有被重定向。我想知道如何修复此代码。

这是我的App.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Switch, Routes, Route, Swit } from 'react-router-dom';
import MasterLayout from '../src/layouts/admin/MasterLayout'

import { Navigate } from 'react-router-dom';


import Dashboard from './components/admin/Dashboard';
import Profile from './components/admin/Profiles';
import Login from './components/frontend/frontend/Auth/Login';
import Register from './components/frontend/frontend/Auth/Register';
import Home from './components/frontend/Home';
import AdminPrivateRoute from './AdminPrivateRoute';


import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8000';
axios.defaults.headers.post['Content-Type'] = 'application/json';

axios.defaults.headers.post['Accept'] = 'application/json';
axios.defaults.withCredentials = true;

axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('auth_token');
  config.headers.Authorization = token ? `Bearer ${token}` : ''
  return config;
}
)

function App() {
  return (
    <div className="App">
      <Router>

        <Routes>
          <Route path="/" element={<Home />} />


          <Route path="/login" element={localStorage.getItem('auth_token') ? <Navigate to="/" /> : <Login />} >

          </Route>

          <Route path="/register" element={localStorage.getItem('auth_token') ? <Navigate to="/" /> : <Register />} >

          </Route>
   
              <Route path="/admin/*" element={<AdminPrivateRoute />} >
              </Route>
          
            





        </Routes>

      </Router>

    </div>
  );
}

export default App;

这是我的 AdminPrivateRoute.js 文件

import React from 'react'
import { BrowserRouter as Router, Switch, Routes, Route, Swit } from 'react-router-dom';
import MasterLayout from './layouts/admin/MasterLayout';
import { Navigate,Outlet  } from 'react-router-dom';

function AdminPrivateRoute({ ...rest }) {

    return (

       

            <Routes>

                <Route {...rest}
                    render={({ props, location }) =>
                        localStorage.getItem('auth_token') ?
                            (<MasterLayout  {...props} />) :
                            (<Navigate to={{ pathname: '/login', state: { from: location } }} />)



                    }
                />
    
            </Routes>

       
    );
}
export default AdminPrivateRoute;

这是我的route.js

import Dashboard from '../components/admin/Dashboard';
import Profile from '../components/admin/Profiles';
import Login from '../components/frontend/frontend/Auth/Login';
import Register from '../components/frontend/frontend/Auth/Register';


const routes = [
{path:'/admin',exact:true,name:'Admin'},
{path:'/admin/dashboard',exact:true,name:'Dashboard',component: Dashboard},
{path:'/admin/profile',exact:true,name:'Profile',component: Profile},
{path:'/admin/login',exact:true,name:'Login',component: Login},
{path:'/admin/register',exact:true,name:'Register',component: Register},

];


export default routes;

我正在学习有关 React（旧版本）的教程，并且正在尝试更改为 React V6。最后，...rest、render、locations、state from location 是为了什么？总的来说，有人可以解释该代码块以了解正在发生的事情。

你能指导我吗？

Answer 1

您的 AdminPrivateRoute 组件肯定混淆了旧的 react-router-dom v5 语法。在 RRDv6 中，私有“路由”被编写为呈现 Outlet（如果包装单个组件则为 或 children）或 Navigate 的包装器组件重定向组件。

import { Navigate, Outlet, useLocation } from 'react-router-dom'; function AdminPrivateRoute() { const location = useLocation(); return localStorage.getItem('auth_token') ? <Outlet /> // <-- nested routes rendered here : <Navigate to="/login" replace state={{ from: location }} />; }

用法：

<Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/login" element={localStorage.getItem('auth_token') ? <Navigate to="/" /> : <Login />} /> <Route path="/register" element={localStorage.getItem('auth_token') ? <Navigate to="/" /> : <Register />} /> <Route element={<AdminPrivateRoute />} > {routes.map(({ path, component: Component }) => ( <Route key={path} path={path} element={<Component />} /> ))} </Route> </Routes> </Router>

请注意，AdminPrivateRoute 不再将其余传递的道具传播到 rest 道具中，因为不再需要传递道具。同样，render 属性消失了，我们不需要使用 auth 包装器呈现 Route。最后，location 是用户尝试访问的当前位置。该位置在路由状态中传递给身份验证路由，因此在身份验证成功后，用户可以被重定向 back 到他们尝试访问的原始路由。

React Private Routes 没有被重定向并且它们不存在

React Private Routes are not being redirected and they don't exist

reactjs

react-router

react-router-dom

react-hooks