BrowserRouter 问题 - 导航无法正常工作

Question

这是我的第一个 reactjs 应用程序，我遇到了导航问题。当我尝试通过 url .../posts 或 ../home 导航时，仅显示主应用程序页面。我怎样才能解决这个问题？提前致谢！

我有应用主页，用户可以在其中登录或注册：

import React,{useState, useEffect} from 'react';
import {Register} from './subcomponents/Register';
import {Login} from './subcomponents/Login';

export function App() {
   return (
    <div className="root"> 
      <Login />
      <p>Hi {name}</p>
      <Register/>
    </div>
  );
}

主页，当用户登录时被重定向：

import React from 'react';
import { Posts } from './Posts';
import {Home} from './Home.jsx';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import {Nav} from './Nav';

export function Home(){
    return(
        <div id="home">
            <BrowserRouter>
                <Nav/>
                <Routes>
                    <Route path='/home' element={<Home/>}/>
                    <Route path="/posts" element={<Posts/>}/>
                </Routes>
            </BrowserRouter>
            <h3>This is the home page</h3>
        </div>
    )
}

导航组件：

import React from 'react';
import {Link} from 'react-router-dom'
import '../css/nav.css';
import Logo from '../images/Logo.png';

export function Nav(){
    return(
        <div id="nav">
            <img src={Logo} className="nav-logo" alt="logo"/>
            <ul>
                <li>
                    <Link to="/home">Home</Link>
                </li>
                <li>
                    <Link to="/posts">Posts</Link>
                </li>
            </ul>
        </div>
    )
}

Answer 1

为了url访问项目中的组件，需要先渲染

 export function App(){
        return(
             <BrowserRouter>
                <div id="app">  
                   <Routes>
                       <Route path='/home' element={<Home/>}/>
                       <Route path="/posts" element={<Posts/>}/>
                   </Routes>          
               </div>
           </BrowserRouter>
        )
    }

BrowserRouter 问题 - 导航无法正常工作

Issue with BrowserRouter - navigation doesn't work properly

reactjs

react-router