reactjs - 错误 : [AdminRoute] is not a <Route> component. <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>

Question

如果用户未登录，我想要经过身份验证的路由，则该页面不应该被访问，就像有人输入 localhost.../admin/dashboard 一样，他不应该能够导航，而是应该被带到登录页面，如果未登录。

我正在使用react-router v6并为我的应用程序创建私有(private)路由。

AdminRoute.js 文件代码如下

import React from "react";
import { Route, Navigate} from 'react-router-dom';
import { isAuthenticated } from "../helper/auth";

//props component is assigned to Component
//...rest spreading props property but reassigning it to a variable called rest
const AdminRoute = ({ component: Component, ...rest }) => {
    return (
        <Route 
            {...rest}
            render={(props) => 
                isAuthenticated() && isAuthenticated().role === 1 ? (
                    <Component {...props} />
                ) : (
                    <Navigate to = '/signin' /> 
                )
            
            }
        
        
        />
    )
};

export default AdminRoute;

App.js 文件代码如下

import React from 'react';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import Header from './Header';
import Home from './Home';
import Signup from './Signup';
import Signin from './Signin';
import ForgotPassword from './forgot-password';
import UserDashboard from './UserDashboard';
import AdminDashboard from './AdminDashboard';
import ShowroomDashboard from './ShowroomDashboard';
import AdminRoute from './AdminRoute';

import NotFound from './NotFound';



const App = () => (<BrowserRouter>
      <Header />
      <main>
            <Routes>
              <Route exact path='/' element={<Home />} />
              <Route exact path='/signup' element={<Signup />} />
              <Route exact path='/signin' element={<Signin />} />
              <Route exact path='/forgotpassword' element={<ForgotPassword />} />
              <Route exact path='/user/dashboard' element={<UserDashboard />} />
              <AdminRoute exact path='/admin/dashboard' element={<AdminDashboard />} />
              <Route exact path='/showroom/dashboard' element={<ShowroomDashboard />} />
              <Route exact path = '*' element={<NotFound />} />
            </Routes>
      </main>
  </BrowserRouter>
  
);

export default App;

Answer 1

react-router-dom 不再支持自定义路由组件，现在更喜欢处理身份验证逻辑并呈现 children prop 或 Outlet 的组件包装器 用于嵌套路由或重定向。

包装单个“Route”组件:

import React from "react";
import { Navigate } from 'react-router-dom';
import { isAuthenticated } from "../helper/auth";

const AdminRoute = ({ children }) => {
  return isAuthenticated()?.role === 1 
    ? children
    : <Navigate to='/signin' replace />;
};

...

<Route
  path='/admin/dashboard'
  element={(
    <AuthRoute>
      <AdminDashboard />
    </AuthRoute>
  )}
/>

包裹嵌套的Route组件:

import React from "react";
import { Navigate, Outlet } from 'react-router-dom';
import { isAuthenticated } from "../helper/auth";

const AdminWrapper = () => {
  return isAuthenticated()?.role === 1
    ? <Outlet />
    : <Navigate to='/signin' replace />;
};

...

<Route path='/admin/dashboard/*' element={<AdminWrapper />}>
  <Route index element={<AdminDashboard />} />
  ... any other '/admin/dashboard/*' routes ...
</Route>