Reactjs 在react 路由dom版本6中的组件内添加路由

我正在try 从Reaction路由5迁移到Reaction路由6.我编写了一个简单的前端，只有在单击登录按钮时才能转到配置文件页面.在个人资料页面中，有两个链接可以查看个人资料和编辑个人资料.

//App.js
import './App.css';

import Header from './components/Header';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import Profile from './pages/Profile';
import NotFoundPage from './pages/NotFoundPage';
import Post from './pages/Post';
import GroupProfile from './pages/GroupProfile';

import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
import {useState} from 'react';

function App(){
    const [login, setLogin] = useState(false);
    const [glogin, setGlogin] = useState(false);
    return(
        <div className="App">
            <Router>
                <Header />
                <button onClick={() => setLogin(!login)}> {!login?"Login":"Logout"} </button>
                <span> | </span>
                <button onClick={() => setGlogin(!glogin)}> {!glogin?"GroupLogin":"GroupLogout"} </button>
                <Routes>
                    <Route path='/' element={<HomePage />} />
                    <Route path='/about' element={<AboutPage />} />
                    {/*<Route path='/prof'>
                        {login ? <Profile />:<Navigate to='/' />}  Nope, in react_router_dom6 putting other things rather than function that returns pages are not valid
                    </Route>*/}
                    <Route path='/group' element={<GroupProfile g_login={glogin} />} />
                    <Route path='/prof/*' element={<Profile l_ogin={login} />} />
                        

                    <Route path='/post/:id' element={<Post />} />
                    <Route path='*' element={<NotFoundPage />} />

                </Routes>
            </Router>
        </div>
    )
}

export default App;

这两个页面是群组个人资料页面和个人资料页面.

GroupProfile.js Profile.js

import React from 'react';
import {useEffect} from 'react';
import {useNavigate} from 'react-router-dom';

function GroupProfile({ g_login }){
    let nav = useNavigate();
    useEffect(() => {
        if (!g_login) {
            nav("/");
        }
    },[g_login, nav])  //you know useEffect hook, if dependancy list is given, when they change then hook will be triggered.

    return(
        <div>
            <p>This is the GroupProfile</p>
        </div>
    )
}

export default GroupProfile;

Profile.js Profile.js

import React, {useEffect} from 'react';
import {Route, Routes, useRouteMatch, Link, useNavigate, useLocation} from 'react-router-dom';

import EditProfile from '../components/EditProfile';
import ViewProfile from '../components/ViewProfile';

/*
function Profile(){
    const { path, url } = useRouteMatch();
    //console.log(useRouteMatch());

    return(
        <>
            <h3>Profile Page</h3>
            <ul>
                <li><Link to={`${url}/viewprofile`}>View Profile</Link></li>
                <li><Link to={`${url}/editprofile`}>Edit Profile</Link></li>
            </ul>
            <Route path={`${path}/viewprofile`} component={ViewProfile} />
            <Route path={`${path}/editprofile`} component={EditProfile} />
        </>
    )
}
*/
function Profile({l_ogin}){
    let nav = useNavigate();
    let location = useLocation();
    //console.log(location)
    useEffect(() => {
        if (!l_ogin) {
            nav("/");
        }
    },[l_ogin, nav])  //you know useEffect hook, if dependancy list is given, when they change then hook will be triggered.
    return(
        <div>
            <h1>Congrats! you made it to the profile page mate...</h1>
            <ul>
                <li><Link to={`${location}/viewprofile`}>View Profile</Link></li>
                <li><Link to={`${location}/editprofile`}>Edit Profile</Link></li>
            </ul>
            <Routes>

                <Route path={`${location}/viewprofile`} element={<ViewProfile />} />
                <Route path={`${location}/Editprofile`} element={<EditProfile />} />
            </Routes>
        </div>
    )
}

export default Profile;

I have commented the Profile component that works in react router version 5 and it is supposed to navigate to /prof/viewprofile when View Profile link is clicked. ViewProfile.js Profile.js and EditProfile.js Profile.js are simple components

ViewProfile.js Profile.js

import React from "react";

const ViewProfile = () => {
    return(
        <div>
            <h3><i>This is what you have to see in the profile.</i></h3>
        </div>
    )
}

export default ViewProfile;

我在Reaction路由5中使用的代码运行良好，当我点击查看配置文件时，它会导航到/prof/viewprofile，没有任何问题.但是，当我使用REACT路由6时，它不会导航到/prof/viewprofile，它只是停留在/prof中，但url更改为类似/prof/[object%20Object]/viewprofile的内容.有人能告诉我我哪里做错了吗？