相关疑难解决方法(0)

看看这个React Router Dom v4示例https://reacttraining.com/react-router/web/example/auth-workflow我看到PrivateRoute组件破坏了这样的休息道具

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

我想确定这{ component: Component, ...rest }意味着:

从props,获取Component prop,然后获取给你的所有其他道具,并重命名props为,rest这样你就可以避免使用传递给Route render函数的props的命名问题

我对吗？

朋友们大家好，我正在尝试创建自己的应用程序，但在将 React-router-dom 更新到 6.02 后遇到问题，我收到此错误

错误：[Home] 不是路线组件。路由的所有子组件必须是路由或 <React.Fragment>

代码如下

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar/Navbar";
import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import Signup from "./pages/signup/Signup";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
          <Navbar />
          <Routes>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/login">
              <Login />
            </Route>
            <Route path="/signup">
              <Signup />
            </Route>
          </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

我的应用看起来像:

class App extends Component {
  render() {
    <Router>
      <div>
      <Route exact path='/login' component={Login} />
      <Route exact path='/game' component={GameContainer} />
      <Route exact path='/chat' component={ChatContainer} />
      <Route exact path='/info' component={InfoContainer} />
    </div>
    </Router>  
  }

如果用户访问/ game下的页面并且未登录,我想将它们重定向到登录页面.

如何在所有路由器中以优雅的方式做到这一点？

我使用 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} …