错误：[PrivateRoute] 不是 <Route> 组件。<Routes> 的所有子组件必须是 <Route>

Dal*_*ney 132

我今天遇到了同样的问题，并根据 Andrew Luca 的这篇非常有用的文章提出了以下解决方案

在 PrivateRoute.js 中：

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

const PrivateRoute = () => {
    const auth = null; // determine if authorized, from context or however you're doing it

    // If authorized, return an outlet that will render child elements
    // If not, return element that will navigate to login page
    return auth ? <Outlet /> : <Navigate to="/login" />;
}

在 App.js 中（我在其他一些页面中留下了示例）：

import './App.css';
import React, {Fragment} from 'react';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Navbar from './ponents/layout/Navbar';
import Home from './ponents/pages/Home';
import Register from './ponents/auth/Register'
import Login from './ponents/auth/Login';
import PrivateRoute from './ponents/routing/PrivateRoute';

const App = () => {
  return (
    <Router>
      <Fragment>
        <Navbar/>
        <Routes>
          <Route exact path='/' element={<PrivateRoute/>}>
            <Route exact path='/' element={<Home/>}/>
          </Route>
          <Route exact path='/register' element={<Register/>}/>
          <Route exact path='/login' element={<Login/>}/>
        </Routes>
      </Fragment>
    </Router>
    
  );
}

在上面的路由中，这是私有路由：

<Route exact path='/' element={<PrivateRoute/>}>
      <Route exact path='/' element={<Home/>}/>
</Route>

如果授权成功，将显示该元素。否则，它将导航到登录页面。

如果使用最新版本，则不需要 `exact` 属性。 (10认同) 啊，我读了那个博客，现在简单地将 `<Route element={<Home/>} />` 渲染为私有插座的子级更有意义。这现在有点吸引人了。我可以看到某些用例的好处。 (2认同) @DallinRomney 在 React 中，不，当涉及到 auth 实现时，React 本身是相当无主见的，但是任何使用的库都可以提供自己的 auth 容器/包装器。这就是吸引人的部分。:) 这实际上与我在 v5 中使用的模式相同，并且我称之为“金门”路线，它是进入“围墙花园”路线的单一身份验证点，现在每个人都不需要身份验证检查。 (2认同)

Dre*_*ese 43

只有Route组件可以是Routes. 如果您遵循 v6 文档，那么您将看到身份验证模式是使用包装器组件来处理身份验证检查和重定向。

function RequireAuth({ children }: { children: JSX.Element }) {
  let auth = useAuth();
  let location = useLocation();

  if (!auth.user) {
    // Redirect them to the /login page, but save the current location they were
    // trying to go to when they were redirected. This allows us to send them
    // along to that page after they login, which is a nicer user experience
    // than dropping them off on the home page.
    return <Navigate to="/login" state={{ from: location }} />;
  }

  return children;
}

...

<Route
  path="/protected"
  element={
    <RequireAuth>
      <ProtectedPage />
    </RequireAuth>
  }
/>

创建自定义组件的旧 v5 模式Route不再有效。使用您的代码/逻辑的更新的 v6 模式可能如下所示：

const PrivateRoute = ({ children }) => {
  const authed = isauth() // isauth() returns true or false based on localStorage
  
  return authed ? children : <Navigate to="/Home" />;
}

并使用

<Route
  path="/dashboard"
  element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  }
/>

Dallin 的回答很好，但老实说，仅用 auth 组件包装目标组件并没有为您节省太多任何东西。如果有的话，它是一个更复杂的解决方案，因为它现在涉及渲染***两个***`Route`组件***和***一个`Outlet`只是为了渲染单个路径。 (3认同) 谢谢，这是我的解决方案，它奏效了。 (2认同)

小智 17

补充减少代码行数，使其更具可读性和美观性。

这可能只是一个评论，但我没有足够的分数，所以我会把它作为答案。

达林的回答有效，但德鲁的回答更好！为了完成 Drew 关于美学的回答，我建议创建一个私有组件，将组件作为道具而不是子组件。

私有路由文件/组件的非常基本的示例：

import { Navigate } from 'react-router-dom';

const Private = (Component) => {
    const auth = false; //your logic

    return auth ? <Component /> : <Navigate to="/login" />
}

路由文件示例：

<Routes>
    <Route path="/home" element={<Home />} />
    <Route path="/user" element={<Private Component={User} />} />
</Routes>

它对我有用，我只需将 `const Private = (Component) =>` 更改为 const `Private = ({Component}) =>` (5认同)

JLa*_*rky 7

我知道这并不完全是如何PirvateRoute工作的秘诀，但只想提一下，新文档推荐了一种稍微不同的方法来使用 react-router v6 处理这种模式：

    <Route path="/protected" element={<RequireAuth><ProtectedPage /></RequireAuth>} />

import { Navigate, useLocation } from "react-router";

export const RequireAuth: React.FC<{ children: JSX.Element }> = ({ children }) => {
  let auth = useAuth();
  let location = useLocation();

  if (!auth.user) {
    return <Navigate to="/login" state={{ from: location }} />;
  }

  return children;
};

ProtectedPage如果需要，您应该在其内部添加更多路线。

有关更多详细信息，请参阅文档和示例。另外，请查看Michael Jackson 的这篇笔记，其中介绍了一些实现细节。

can*_*nsu 7

只需将您的路由器组件设置为 element prop：

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/dashboard" element={<Dashboard />} />
</Routes>

您还可以检查从 v5 升级， reactrouter./docs/en/v6/upgrading/v5

它没有回答这个问题，那么身份验证呢？ (3认同)