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

Question

我是 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 岁一样解释一下

Answer 1

我没有看到您在何处渲染任何 BrowserRouter 组件，但确实发现您的 PrivateRoute 组件存在问题。您将其用作布局组件，但随后既不渲染任何传递的 children 也不渲染嵌套路由的 Outlet 。也没有 component 道具传递给它，所以 Component 导致未定义。 Route 组件也不采用 RRDv6 中的 render prop 函数。由于您正在包装和渲染另一个 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 组件现在只需要一个路由器就可以了。如果您仍然从这里发出问题，我们可能需要查看您的更多代码。

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

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

routes

reactjs

react-router-dom