reactjs - 二级网址不适用于 PrivateRoute

Question

通过遵循一些教程，我终于能够使用 React js 创建一个身份验证系统。当我访问组件的pathprop 时PrivateRoute，此路径首先检查用户的真实性，然后如果身份验证成功，则将用户重定向到请求的路径。

127.0.0.1/dashboard现在的问题是，当我在道具上使用像路径这样的一级 url 时PrivateRoute，它工作正常并将我重定向到仪表板，我可以在浏览器的控制台中看到PrivateRoute正在调用组件。

127.0.0.1/admin/dashboard但是当我在 prop 上使用像路径这样的二级 url 时PrivateRoute，甚至没有调用该组件（在浏览器的控制台中没有任何内容）并且我被重定向到登录页面。

我不明白是什么导致了这种重定向，以及如何使身份验证系统像一级 url 一样为二级 url 工作。

这是我的代码

MainComponent.js

import React from 'react';
import {AuthContext} from '../auth/AuthContext';

import {Route, Switch} from "react-router-dom";
import Login from "../auth/Login";
import Dashboard from "../dashboard/Dashboard";
import {PrivateRoute} from "../route/PrivateRoute";
import {PublicRoute} from "../route/PublicRoute";

const MainComponent = (props) => {

    return (
        <div id="wrapper" className="menu-displayed">

             <Switch>
                   <PublicRoute exact path="/" component={Login}/>
                   <PrivateRoute exact path="/dashboard" component={Dashboard}/>
                   <PrivateRoute exact path="/admin/dashboard" component={Dashboard}/>
             </Switch>

        </div>
    );
};
export default MainComponent

PrivateRoute.js

import React, {useContext} from "react";
import {Route, Redirect} from "react-router-dom";
import {AuthContext} from "../auth/AuthContext";

export const PrivateRoute = ({
         component: Component,
         ...rest
     }) => {

    const {isAuthenticated} = useContext(AuthContext);

    console.log(`Private: ${isAuthenticated}`);

    return (
        <Route {...rest} component={(props) => (
            isAuthenticated ? (
                <Component {...props} />
            ) : (
                <Redirect to="/" />
            )
        )}/>
    )
}

AuthContext.js

import React, {createContext, useContext, useEffect, useState} from "react";
import axios from "axios";
import cookie from "react-cookies";

export const AuthContext = createContext();

const AuthContextProvider = (props) => {

    const [isAuthenticated, setIsAuthenticated] = useState(false);

    useEffect(() => {
        cookie.load('token') ? setIsAuthenticated(true) : setIsAuthenticated(false);
    });

    function login(email, password) {

        axios.post('http://127.0.0.1:8000/api/auth/login', {
            email: email,
            password: password
        },
            {
                headers: {"Authorization": `Bearer ${cookie.load('token')}`}
            })
            .then(function (response) {

                cookie.save('token', response.data.token, {path:'/'});
                setIsAuthenticated(true);

            })
            .catch(function (error) {
                console.log(error);
            });

    }

    function logout() {
        cookie.remove('token');
        setIsAuthenticated(false);
    }

    const checkAuthenticated = () => {
        if (cookie.load('token'))
        {
            setIsAuthenticated(true);
        }
    }

    return (
        <AuthContext.Provider value={{isAuthenticated, login, logout}}>
            {props.children}
        </AuthContext.Provider>
    )

}

export default AuthContextProvider;

注意： 我在 Laravel 中使用 React js，并使用下面的 Route 将所有路径重定向到单个视图

Route::view('/{path?}', 'layouts.main');

标签： reactjslaravelreact-router