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

Posted 2023-02-21

【中文标题】在另一个组件 V6 中反应路由

【英文标题】：React routing within another component V6

【发布时间】：2020-12-19 00:49:46

【问题描述】：

我正在使用 Reavt V6 路由。

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

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

我如何使它工作？

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

【参考方案1】：

根据 React Router 文档：

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

您可以在此处阅读更多相关信息 - 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 => 显示反犯罪组件

【讨论】：

它似乎可以进入游戏组件。随着游戏组件正确加载，但视图不存在。 middleContentHolder 为空。

看起来它不会在路线中显示任何内容。

嗨@MalinPedersen，我用它做了一个POC并且工作正常。它没有为您显示路线吗？喜欢/crime？

/crime 加载游戏组件，但在应该加载犯罪的 middleContentHolder 中没有任何内容。 （你有什么可以聊天的地方吗？）

如果我告诉你我不知道如何从这里开始聊天 (LOL)。所以，我为你添加了一个代码示例。

【参考方案2】：

您应该使用：component=Crime，而不是 element=<Crime />。

查看documentation 以供参考。

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

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

【讨论】：

嗯。将我的元素更改为组件 etg 犯罪路线。但这不会产生任何影响，但它仍然不会加载。会看那个答案。

这会在 v6 @rleiva93 中产生任何差异吗？

如果它与 React Router (reactrouter.com/web/api/Route/component) 的当前文档相匹配，则不会有任何区别。

不幸的是@rleiva93

你说得完全正确......对此感到抱歉......你可能想检查一下：github.com/ReactTraining/react-router/blob/dev/docs/…我想你还没有弄清楚。