React js错误: Uncaught：[BrowserRouter]不是<Route>组件。<Routes>的所有组件子组件必须是<Route>或<React.Fragment>
React js错误: Uncaught：[BrowserRouter]不是<Route>组件。<Routes>的所有组件子组件必须是<Route>或<React.Fragment>
提问于 2022-01-11 20:08:22
我在React上是新手，我面临的错误是“隐性错误: BrowserRouter不是组件，所有组件的子组件必须是a或”。
我试图做一个私人的路线，以避免用户登陆仪表板而不被标记。
PrivateRoute.js
export default function PrivateRoute({ component: Component, ...rest }) {
const { currentUser } = useAuth()
return (
<Route
{...rest}
render={props => {
return currentUser ? <Component {...props} /> : <Route path="/" element={<Navigate to='/login' replace />} />
}}
></Route>
)
}App.js
function App()
return(
<Container
className="d-flex align-items-center justify-content-center"
style={{minHeight: "100vh"}}
>
<div className="w-100 " style={{ maxWidth: '400px'}}>
<Router>
<AuthProvider>
<Routes>
<Route element={<PrivateRoute/>} >
<Routes>
<Route path='/' element= {<Dashboard />}/>
</Routes>
</Route>
<Route path="/signup" element={<Signup />}/>
<Route path="/login" element={<Login />}/>
</Routes>
</AuthProvider>
</Router>
</div>
</Container>
)
} 我不知道该怎么做，也找不到关于这个具体问题的信息，请解释一下我5岁了
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-11 21:32:01
我不知道您在哪里呈现任何BrowserRouter组件，但确实看到了PrivateRoute组件的问题。您将它用作布局组件，但随后不会为嵌套路由呈现任何已传递的children或Outlet。也没有传递给它的component支柱，所以Component会导致未定义。Route组件也不接受RRDv6中的render支柱函数。由于您正在包装和呈现另一个Routes组件，我将假设您希望呈现children支柱。有条件地呈现children支柱或Navigate组件。
export default function PrivateRoute({ children }) {
const { currentUser } = useAuth()
return currentUser ? children : <Navigate to='/login' replace />;
}使用PrivateRoute包装子Routes和路由。
<Router>
<AuthProvider>
<Routes>
<Route
path="*"
element={(
<PrivateRoute>
<Routes>
<Route path='/' element={<Dashboard />} />
</Routes>
</PrivateRoute>
)}
/>
<Route path="/signup" element={<Signup />} />
<Route path="/login" element={<Login />} />
</Routes>
</AuthProvider>
</Router>
Router (我假设这是较高级的路由器之一，即BrowserRouter__.如果您在应用程序的其他地方有另一个路由器，请删除它，因为整个应用程序只需要一个路由器)、Routes和App中的Route组件现在都应该可以工作了。如果您在这里仍然有问题，我们可能需要看到更多您的代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70672843
复制相关文章
相似问题
腾讯云开发者
