reactjs - 在另一个组件 V6 中 react 路由

Question

我正在使用 Reavt V6 路线。

我正在努力让 gamecomponent 中的路由正常工作。

访问/test 会得到一个完全空白的页面。而它应该在 gamecomponent 中加载犯罪模块。 访问/渲染 gamecomponent，但/test 不渲染 gamecomponent 和其中的路由。

我如何让它工作？

访问 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;

私有(private)路由:

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;

Answer 1

根据 React Router 文档:

You can render a element anywhere you need one, including deep within the component tree of another . These will work just the same as any other , except they will automatically build on the path of the route that rendered them. If you do this, make sure to put a * at the end of the parent route's path. Otherwise the parent route won't match the URL when it is longer than the parent route's path, and your descendant won't ever show up.

您可以在此处阅读更多相关信息 - Descendant Routes

所以，您只需要做 2 个小改动:

app.js

添加*在PrivateRoute中的路径:

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

gamecomponent.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 => 显示反犯罪组件