未捕获的错误：[PrivateRoute] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>答案

【问题标题】：Uncaught Error: [PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>未捕获的错误：[PrivateRoute] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>
【发布时间】：2022-01-06 14:43:53
【问题描述】：

我正在创建一个管理应用程序，我想在其中为管理仪表板创建一个受保护的路由。登录和注册路线是公开的。在创建受保护的路线之前，每条路线都运行良好。我创建了一个高阶组件来创建私有路由。我将路由替换为私有路由，页面加载并且终端没有错误。但是由于私有路由不是路由组件，因此页面不呈现任何内容并且控制台会抛出错误。路由的所有子节点必须是 route 或 react.fragment。

这是我的 app.tsx 文件

import React from 'react';
import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
import {Home, Signup, Signin} from './container/index';
import './App.css';
import PrivateRoute from './components/common/HOC/Index';


function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <PrivateRoute path="/" element={<Home/>} />
          <Route path="/signup" element={<Signup />} />
          <Route path="/signin" element={<Signin />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

这是我的私有路由器组件。

import React from 'react';
import { Route } from 'react-router-dom';


const PrivateRoute = (props:any) => {
    return <Route {...props}/>
}


export default PrivateRoute;

【问题讨论】：

react-router v6 与 v5 有很大不同，您的代码应该在 v5 中工作，但 v6 可能会要求您以不同的方式做事。也许这有助于dev.to/iamandrewluca/private-route-in-react-router-v6-lg5 或stackoverflow.com/questions/62384395/…

标签： reactjs typescript

【解决方案1】：

PrivateRoute 组件：

import React from 'react'
import { Outlet, Navigate } from 'react-router-dom'



export default function PrivateRoutes() {
    let  userid = localStorage.getItem("token") == null ? false : true;
    return (
        <>
            {userid ? <Outlet  /> : <Navigate to="/signin" />};
        </>

    )
}

App.js

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './container/Home/Home'
import Signin from './container/Signin/Signin'
import Signup from './container/Signup/Signup'
import PrivateRoute from './components/HOC/privateRoute'
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
        <Route exact element={<PrivateRoute  />}>
            <Route exact path="/" element={<Home />} />
          </Route>
          <Route path='/signin' element={<Signin />} />
          <Route path='/signup' element={<Signup />} />
          <Route />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

【讨论】：