React路由器路由包装器的解决方案

Question

我正在尝试为React Router的Route组件创建一个包装器，类似于以下内容：

import { Navigate, Route } from 'react-router-dom'
function MSRoute({ path, element, isStaff = false }) {
return (
<>
{ isStaff
? (
<Route
path={path}
element={element}
/>
) : (
<Route
path="*"
element={<Navigate to="/" />}
/>
)
}
</>
)
}
export default MSRoute

基本上是因为我需要为某些类型的用户限制一些路由，但我得到了以下错误：

Uncaught Error: [MSRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

有办法做到这一点吗？有干净的解决方法吗？

关于

Answer 1

错误Uncaught Error: [MSRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>通知您Route组件只能由Routes或其他Route组件渲染。MSRoute既不是Route也不是React.Fragment，因此不能将其呈现为Routes组件的子级。

您似乎想要渲染已路由的组件，或者基于isStaff属性值进行重定向。为了使MSRoute成为包装器组件，它需要包装并呈现children道具。

示例：

import { Navigate } from 'react-router-dom'
function MSRoute({ children, isStaff = false }) {
return isStaff ? children : <Navigate to="/" replace />;
}

用法：

<Route
path={path}
element={(
<MSRoute isStaff={isStaff}>
{element}
</MSRoute>
)}
/>

如果需要使用此isStaff检查包装多个路由，则可以将MSRoute转换为布局组件，该组件为嵌套路由呈现Outlet，而不是呈现单个子组件。

import { Navigate, Outlet } from 'react-router-dom'
function MSRoute({ isStaff = false }) {
return isStaff ? <Outlet /> : <Navigate to="/" replace />;
}

用法：

<Route element={<MSRoute isStaff={isStaff} />}>
<Route path={path} element={element} />
... other routes
</Route>