Reactjs 保护路由 [Guard] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>

Question

我是 ReactJS 的新手。我遵循这个tutorial 但我的路由器出现错误

有我的app.js

import './App.css';
import {BrowserRouter} from 'react-router-dom';
import MyRoutes from "./MyRoutes";
function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <MyRoutes/>
      </div>
    </BrowserRouter>
 );
}
export default App;

我的MyRoutes.js

import React from 'react';
import {Routes,Route,Navigate} from 'react-router-dom';
import Home from "./components/pages/HomeComponent";
import Login from "./components/pages/LoginComponent";
import Register from "./components/pages/RegisterComponent";
import PrivateRoute from './PrivateRoute';
import {Guard} from './Guard';
import Header from './components/layouts/Header';
function MyRoutes(){
  return (
    <>
        <Header/>
        <Routes>
            <Route exact path="/" render={props => (
                <Navigate to={{ pathname: '/home' }} />
            )}/>
            <Route path="/home" element={<Home/>}/>
            <Route path="/user/login" element={<Login/>}/>
            <Route path="/user/register" element={<Register/>}/>
            {/*Redirect if not authenticated */}
            <Route element={<Guard path="/user" token="user-token" routeRedirect="/user/login" element={<PrivateRoute/>} />} />
        </Routes>
    </>
);
}
export default MyRoutes;

我的Guard.js

import React from 'react';
import {Route, Navigate, Outlet} from 'react-router-dom';
export const Guard = ({component:Component, token:Token, routeRedirect,...rest}) => (
<Route {...rest} render={props => (
    localStorage.getItem(Token) ?
        <Outlet/> :
        <Navigate to={{pathname:routeRedirect, state:{from:props.location}}} />
)}/>
);

还有我的PrivateRoute.js

import React from 'react';
import {Routes ,Route,Navigate} from 'react-router-dom';
import Profile from './components/pages/ProfileComponent';
export default function PrivateRoute(props) {
return (
    <div>
        {/*<Header/>*/}
        <Routes>
            <Route exact path={`${props.match.path}/view-profile`} element={<Profile/>}/>
            <Route exact path={props.match.path} render={props=> (
                <Navigate to={{ pathname: `${props.match.path}/view-profile` }} />
            )} />
        </Routes>
    </div>
);
}

我得到了这个错误：“[Guard] 不是一个组件。所有子组件必须是 a 或 ”

我做了一些研究并阅读了但我不明白如何解决我的问题

你能帮帮我吗？

我使用 React v17.0.2、react-router v6.2.2 和 react-router-dom v6.2.2

Answer 1

问题

Guard 组件仍在尝试直接渲染 Route 组件，这在 react-router-dom@6 中是无效的。它只需要呈现 Outlet 或重定向。

所有 Route 组件都使用带有 React.ReactNode、a.k.a 的 element 属性。 JSX。不再有任何 component 或 render 和 children 功能道具。

将 PrivateRoute 直接渲染的 "/user/view-profile" 路由嵌套在 Guard 布局路由中。

示例解决方案

export const Guard = ({ token, routeRedirect }) => {
  const location = useLocation();

  return localStorage.getItem(token)
    ? <Outlet/>
    : <Navigate to={routeRedirect} replace state={{ from: location }} />;
};

用法：

function MyRoutes() {
  return (
    <>
      <Header/>
      <Routes>
        <Route path="/" element={<Navigate to="/home" replace />} />
        <Route path="/home" element={<Home />}/>
        <Route path="/user/login" element={<Login />}/>
        <Route path="/user/register" element={<Register />}/>
        
        <Route
          element={<Guard token="user-token" routeRedirect="/user/login" />}
        >
          <Route path="/user/view-profile" element={<Profile />} />
        </Route>
        ... any other protected routes ...
      </Routes>
    </>
  );
}

Reactjs 保护路由 [Guard] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>

Reactjs protected routes [Guard] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

reactjs

react-router-dom

问题

示例解决方案