Question

我正在尝试为我的项目使用React Routing V6。

当前正在努力使身份验证和路由本身正常工作。我的代码的想法是：

未经身份验证的用户

使用我的登录组件重定向到/ login。（仅登录组件）

授权用户：

加载gamecomponent组件，而middleContentHolder内的其余链接将加载到名为crime的gameComponents div类中

示例：

已认证用户：

访问url / crime->加载游戏组件，并在游戏组件中加载SideBarRight组件。访问URL / test->加载gamecomponent，并在gamecomponent内加载/login组件。

未经身份验证的用户：

vitits url / crime->未通过身份验证->重定向到import React from 'react'; import logo from './logo.svg'; import './App.css'; import GameComponent from './gameComponent.jsx'; import { BrowserRouter as Router } from 'react-router-dom'; import { Routes, Route, Navigate, Outlet } from 'react-router-dom'; import Crime from './components/game/crime.jsx'; import PrivateRoute from './PrivateRoute'; import Login from './components/login/login.jsx'; function App() { return ( <Router> <Routes> <Route path="/" element={<GameComponent />}> <PrivateRoute isAuth={true} path="crime" component={Crime} redirectTo='/login'/> </Route> </Routes> </Router> ); } export default App;->仅加载loginmodule。

请注意，在gamecomponent组件中，我确实有将在gamecomponent内加载的链接。 app.js将加载游戏组件，或者如果未通过身份验证，则将用户重定向到登录名。

app.js：

import React, {Component} from 'react';
//import Component from 'react-dom';
import SideBarRight from './components/game/sideBarRight.jsx';
import SideBarLeft from './components/game/sideBarLeft.jsx';
import Crime from './components/game/crime.jsx';
import Login from './components/login/login.jsx';
import './gameComponent.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { BrowserRouter} from "react-router-dom";


class GameComponent extends Component{
 constructor() {
    super();
    this.state = {
    userData: {
        user: {cash:0, bank:0, weapon:'', username: 'test', locationname: 'Bankok',
        defence: 0},
        rankbar: {rankpercent: 50, rank: 'Mafia'},
        }
    }
    
    
    
    
  }


render() {
    return (
    <div className="main">
    <div className="sidebar left">
                <SideBarLeft/>

    </div>
    <div className="middleContentHolder">
        <Route path="/" element={<Crime />} />

    <Route path="/test" element={<Crime />} />
    <Route path="/crime" element={<Crime />} />
    <Route path="/test" element={<SideBarRight UserData={this.state.userData} />} />

        <div className="col-8">
            <div className="content">
            <div className="header"><span>Test...</span></div>
            
            </div>
        </div>
    </div>
    <div className="sidebar right">
        <SideBarRight UserData={this.state.userData}/>
        </div>
    </div>
    );
  }
    
}



export default GameComponent;

游戏组件：

PrivateRoute

import React from 'react'; import PropTypes from 'prop-types'; import { Route, Navigate } from 'react-router-dom'; import { useNavigate } from "react-router-dom"; import Login from './components/login/login.jsx'; import GameComponent from './gameComponent.jsx'; const PrivateRoute = ({ component: Component, redirectTo, isAuth, path, ...props }) => { isAuth = false; if(!isAuth) { return <Navigate to={redirectTo} />; } return <Route path={path} element={<Component />} /> }; export default PrivateRoute; ：（ auth只是一个虚拟atm）

isAuth = isAuth;

更新：

原始身份验证为：在私有路由中

     <PrivateRoute isAuth={true} path="/" component={GameComponent}  redirectTo='/login'>
              rest of routes exist in gamecomponent..
     </PrivateRoute>

显示我想要的内容的一个非工作代码示例：

<路由路径=“ / login”元素= {}>

std::cin >> input ;

Answer 1

如果您只想在经过验证的情况下加载App，则需要像这样更改function App() { return ( <Router> <Routes> <Route path="/login" element={<LoginComponent />} /> <PrivateRoute isAuth={true} path="/" component={GameComponent} redirectTo='/login'/> </Routes> </Router> ); }组件：

/login

这里，我们实质上是在进行切换，以便在没有身份验证时可以导航到<Routes>。 path在这里至关重要，因为它只会呈现与确切的TypeError: Cannot read property 'props' of undefined匹配的组件。

在组件内进行V6路由防护和路由

1 个答案: