React Router 6嵌套路由问题：客户端路由无法正常访问

已按建议重构代码，登录与验证功能正常，专业用户可正常访问ProRoute，但客户端用户登录验证通过并获取用户数据后，仍停留在登录页，无法进入ClientRoute。

疑问 #

• 构建两个独立的/home路由（如/home/pro/和/home/client）是否可行？
• 同一路径/home能否对应<HomePro />和<HomeClient />两个组件（基于两种权限路由上下文）？
• 我的嵌套路由是否存在问题？

相关代码（使用react-router v6） #

App_router（AuthProvider已包裹App组件） #

import React from 'react';
import { Route, Routes } from "react-router-dom";

import { ProRoute } from './ProRoute';
import { ClientRoute } from './ClientRoute';

import HomePro from '../Pages/HomePro';
import HomeClient from '../Pages/HomeClient';
import Exercises from '../Pages/Exercises';
import UserForm from '../Pages/Forms/UserForm';
import Login from '../Pages/Login';

const App_Router = () => {
  return (
    <Routes>
      <Route index element={<Login />} />
      <Route path='/login' element={<Login />} />
      <Route path='/register' element={<UserForm />} />
      <Route path='/home'>
        <Route element={<ProRoute />}>
          <Route index element={<HomePro />} />
          <Route path='exercicios' element={<Exercises />} />
        </Route>
        <Route element={<ClientRoute />}>
          <Route index element={<HomeClient />} />
          <Route path='exercicios' element={<Exercises />} />
        </Route>
      </Route>
    </Routes>
  )
}

export default App_Router;

ProRoute #

import React from 'react'
import { Navigate, Outlet } from 'react-router-dom';
import { useContext } from 'react';
import { AuthContext } from '../Contexts/AuthContext';

export const ProRoute = ({ children }) => {
  const { isAuthenticated, loggedUser, isLoading } = useContext(AuthContext);
  
  if (isLoading) {
    return <section>Carregando...</section>;
  }
  
  if (isAuthenticated && loggedUser.data.type == "Profissional") {
    return children || <Outlet />;
  } else {
    return <Navigate to='/login' replace />;
  }
}

ClientRoute #

import React from 'react'
import { Navigate, Outlet } from 'react-router-dom';
import { useContext } from 'react';
import { AuthContext } from '../Contexts/AuthContext';

export const ClientRoute = ({ children }) => {
  const { isAuthenticated, loggedUser, isLoading } = useContext(AuthContext);

  if (isLoading) {
    console.log("aqui");
    return <aside>Carregando...</aside>;
  }

  if (isAuthenticated && loggedUser.data.type == "Cliente") {
    return children || <Outlet />;
  } else {
    return <Navigate to='/login' replace />;
  }
}

Login页的handleLogin方法 #

const handleSubmit = async (e) => {
  e.preventDefault();
  await login(values)
    .then( res => {
      setValues({
        email: '',
        senha: '',
        tipoUsuario: ''
      });
      navigate('/home', {replace: true});
    })
    .catch(error => console.log(error));
}

内容的提问来源于stack exchange，提问作者AgstAngelo