使用Outlet将路由添加到受保护路由后无法访问

Question

我正在尝试在react-router-dom v6中创建受保护的路由。但是一旦放置嵌套路由，我就无法访问它们。收到错误没有路线匹配位置“/places/new”

如果从

<PrivateRoutes>

中删除这些路线，则可以明确地正常工作。

我已经写了如下路线：

<AuthContext.Provider value={{isLogin : isLogin, login : login, logout : logout}}>
      <Router>
        <main>
        <MainNavigation></MainNavigation>
          <Routes>
              <Route path="/" element={<Users></Users>} exact></Route>
              <Route path="/:userId/places" element={<UserPlaces/>}></Route>
              <Route path="places/" element={<PrivateRoutes isAuthenticated={isLogin}>
                <Route path="new" element={<NewPlace></NewPlace>}></Route>
                <Route path=":placeId" element={<UpdatePlace></UpdatePlace>}></Route>
              </PrivateRoutes>}>
              </Route>
              <Route path="/auth" element={<Authenticate></Authenticate>}></Route>
          </Routes>
        </main>
      </Router>
    </AuthContext.Provider>

PrivateRoutes 定义如下：

const PrivateRoutes = ({isAuthenticated, children}) => {
    const navigate = useNavigate()
    useEffect(() => {
        (isAuthenticated) ? <Outlet></Outlet> : navigate('/auth')
    })
}

Answer 1

如果用户未登录，您不希望

useEffect

重定向用户。而是使用此流程

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoutes = ({isAuthenticated, children}) => {

    if(!isAuthenticated){
        return <Navigate to={"/auth"} replace/>
    }
    return (
        <Outlet></Outlet>
    )
}

嵌套路由必须是另一条路由的子路由。试试这个

<AuthContext.Provider value={{ isLogin: isLogin, login: login, logout: logout }}>
    <Router>
        <main>
            <MainNavigation></MainNavigation>
            <Routes>
                <Route path="/" element={<Users></Users>} exact></Route>
                <Route path="/:userId/places" element={<UserPlaces />}></Route>
                <Route path="places/" element={<PrivateRoutes isAuthenticated={isLogin}/>}>
                    <Route path="new" element={<NewPlace></NewPlace>}></Route>
                    <Route path=":placeId" element={<UpdatePlace></UpdatePlace>}></Route>
                </Route>
                <Route path="/auth" element={<Authenticate></Authenticate>}></Route>
            </Routes>
        </main>
    </Router>
</AuthContext.Provider>