React js 错误：未捕获的错误：[BrowserRouter] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <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 属性函数。由于您正在包装和渲染另一个 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 组件现在应该都可以工作了。如果您在此处仍有问题，我们可能需要查看更多代码。