在另一个组件 V6 中反应路由

Question

我正在使用 Reavt V6 路线。

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

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

我如何让它工作？

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

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

应该加载了。

app.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;

Answer 1

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

检查 documentation 以供参考。

在您的 PrivateRoute 组件中，您可能希望使用 <Redirect> 组件对其进行增强。

请参考这个的答案，甚至有一个 post 的解释非常好，可能会对您有所帮助。

Answer 2

根据 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

可以用routes查看：

/ => 显示犯罪成分

/crime => 显示犯罪成分

/anticrime => 显示反犯罪组件

在另一个组件 V6 中反应路由

React routing within another component V6

reactjs

react-router

react-router-component