如何使用react路由器创建管理路由v6

Question

你好，我是react开发的新手，最近react路由器已更新到v6，这在我尝试创建管理路由时造成了很多问题。例如在我使用的v5中。<AdminRoute确切路径=｛${path}/makeAdmin｝>但它在v6中不起作用。请帮帮我。

Answer 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>