2

我正在使用 Reavt V6 路线。

我正在努力让我的游戏组件内的路线正常工作。

访问 /test 会导致一个完全空白的页面。虽然它应该在游戏组件中加载犯罪模块。访问 / 渲染游戏组件，但 /test 不渲染游戏组件和其中的路由。

我如何使它工作？

访问 url /crime 应该会导致gamecomponent被加载，并且

<Route path="/test" element={<Crime />} />

应该加载。

应用程序.js

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, Switch } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import Login from './components/login/login.jsx';



function App() {
    
  return (

  <Router>
    <Routes>
       <Route path="/login" element={<Login />} />
       <PrivateRoute  isAuth={true} path="/" component={GameComponent}  redirectTo='/login'/>
    </Routes>
  </Router>
  );
}
export default App;

私人路线：

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;

游戏组件：

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="/test2" 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;
4

2 回答 2

6

根据 React Router 文档：

你可以在任何你需要的地方渲染一个元素，包括在另一个组件树的深处。这些将与任何其他的一样工作，除了它们将自动构建在渲染它们的路径的路径上。如果这样做，请确保在父路由路径的末尾放置一个 *。否则，当父路由的路径长于父路由的路径时，父路由将不会匹配 URL，并且您的后代将永远不会出现。

你可以在这里阅读更多关于它的信息 -后代路线

所以，你只需要做 2 点小改动：

应用程序.js

添加*到您的路径PrivateRoute：

<Routes>
   <Route path="/login" element={<Login />} />
   <PrivateRoute
      isAuth={true}
      // Here's the trick
      path="/*"
      component={GameComponent}
      redirectTo="/login"
   />
</Routes>

游戏组件.jsx

包装Route器<Routes>：

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

这是一个代码示例：codesandbox

您可以使用路线检查它：

/=> 显示犯罪成分

/crime=> 显示犯罪成分

/anticrime=> 显示反犯罪组件

于 2020-09-02T03:46:03.900 回答
0

而不是element={<Crime />}你应该使用：component={Crime}。

检查文档以供参考。

在您的PrivateRoute组件中，您可能希望使用该<Redirect>组件来增强它。

请参考这个问题的答案，甚至有一个很好的解释可以帮助你的帖子。

于 2020-08-30T21:57:50.443 回答