如何在react-router-dom@v6中使用私有路由

Question

我想使用带有react-router-dom v6的私有路由，而我正在尝试应用身份验证条件。

在 App.js 中

<Route path='/dashboard' element= { <PrivateRoute><Abc /></PrivateRoute>}/>

在组件.js中

<Routes> <Route {...rest} render={props => !isAuthenticated && !loading ? (<Navigate to='/login' />) : (<Component {...props} />)} /></Routes>

• 当路线不在内部时它会给出错误：

错误：只能用作元素的子元素，从不直接渲染。请用

包裹您的

• 当它在里面时它给出一个错误：

错误：[Abc] 不是 组件。的所有子组件必须是 或

请帮我解决这个问题吗？或者有什么建议。

尝试过此操作，但在两种情况下都出现上述错误之一

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

还有

`<PrivateRoute path='/dashboard' element= { <Dashboard />}/>`

图片代码完整

Answer 1

在

react-router-dom

版本 6 中，

render

组件没有

Route

属性。您还可以稍微简化您的

PrivateRoute

包装器组件，它不需要渲染更多

Routes

和

Route

组件。

有条件地渲染组件的子组件或导航以登录。

const PrivateRoute = ({ auth: { isAuthenticated }, children }) => {
  return isAuthenticated ? children : <Navigate to="/login" />;
};

用途：

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

稍微改进的版本允许嵌套更多私有路由组件，利用插座来处理嵌套路由的渲染。

const PrivateWrapper = ({ auth: { isAuthenticated } }) => {
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};

用途：

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

Answer 2

这是一条您可以使用的私人路线，目前正在运行 v6.0.2

export const PrivateRoute = ({ children}) => {
  const isAuthenticated = true;
      
  if (isAuthenticated ) {
    return children
  }
    
  return <Navigate to="/" />
}

这就是您使用私人路线的方式

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

Answer 3

这是使用

Outlet

的 PrivateRoute 的不同实现

import {
  Routes,
  Route,
  BrowserRouter,
  Link,
  Navigate,
  Outlet
} from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <MyMenu />
      <Routes>
        <Route path="/" element={<Public />} />
        <Route element={<PrivateOutlet />}>
          <Route path="/private-outlet" element={<Private />} />
        </Route>
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

const Public = () => <div>public</div>;
const Private = () => <div>private</div>;
const Login = () => <div>login</div>;

function PrivateOutlet() {
  const auth = useAuth();
  return auth ? <Outlet /> : <Navigate to="/login" />;
}
function useAuth() {
  return true;
}

function MyMenu() {
  return (
    <nav>
      <Link to="/">Public</Link>
      {" | "}
      <Link to="/private-outlet">Private Using Outlet</Link>
    </nav>
  );
}

将

useAuth

从

true

返回到

false

，如下所示

function useAuth() {
      return false;
    }

然后你就会看到差异。

Answer 4

私有路由组件

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>
  );
}

Answer 5

对于 Typescript 用户来说，这样的方法是可行的。假设您正在使用 npm 包

react-router-dom

。

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

export function PrivateRoute({ children }: RouteProps): JSX.Element {
  const isLoggedIn = checkUser() // check cookie or local storage etc.
  return (
    <>
      {isLoggedIn
        ? children
        : <Navigate to="/sign-in"/>
      }
    </>
  );
}

然后在你的路线中：

function App() {
  return (
      <Routes>
        <Route
          path="/"
          element={
            <PrivateRoute>
              <DashboardPage />
            </PrivateRoute>
          }
        />
        <Route path="/sign-in" element={<SignInPage />}/>
        <Route path="/sign-up" element={<SignUpPage />}/>
      </Routes>
  );
}