如何使用反应路由器 v 6 创建管理路由答案

【问题标题】：How to create admin route using react router v 6如何使用反应路由器 v 6 创建管理路由
【发布时间】：2022-01-04 14:48:09
【问题描述】：

您好，我是 react 开发新手，最近 react 路由器已更新到 v 6，当我尝试创建管理路由时，这导致了很多问题。例如在我使用的 v5 中。 ${path}/makeAdmin}> 但它在 v6 中不起作用。请帮帮我。

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

标签： reactjs react-router react-router-dom

【解决方案1】：

Route 组件 API 和通用路由从版本 5 到 6 发生了显着变化。自定义路由组件已不复存在，取而代之的是处理业务逻辑并返回 children 属性或 Outlet (用于嵌套的Route 组件）或重定向（以Navigate 和replace 属性的形式）。

示例 v5 自定义 Route：

const AdminRoute = props => {
  const isAdmin = /* admin business logic */;
  return isAdmin ? <Route {...props} /> : <Redirect to="/" />;
};

...

<AdminRoute exact path={`${path}/makeAdmin`}>
  <ProtectedAdminComponent />
</AdminRoute>

使用包装器组件转换到 v6 的示例：

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

const AdminWrapper =() => {
  const isAdmin = /* admin business logic */;
  return isAdmin ? <Outlet /> : <Navigate to="/" replace />;
};

...

<Route element={<AdminWrapper />}>
  <Route path={`${path}/makeAdmin`} element={<ProtectedAdminComponent />} />
</Route>

【讨论】：