Reactjs 点击菜单时，页面不会被重定向，只有URL-JS中的更改

在我的App.js中，我有以下代码片段。我想要实现的就是能够点击主页或关于主页的链接并呈现页面

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './components/Home';
import Header from './components/Header';
import About from './components/About';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

function App() {
  return (
    <Router>
    <div className="App">
      <Switch>
        
        <Route path="/" component={Home}>
          <Header />
          <Home />
        </Route>
        <Route path="/about" component={About}>
            
            <About />
        </Route>
       
      </Switch>
    </div>
    </Router>
  );
}

export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./components/Home”导入Home；
从“./components/Header”导入标题；
从“./components/About”导入关于；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}
函数App（）{
返回(
);
}
导出默认应用程序；

在我的标题中.js 当我点击“关于”链接时，更改只显示在URL上，而不显示任何页面，它仍保留在默认页面中

import React from 'react'
import { Link } from 'react-router-dom'


function Header() {
   
    return (
        <div>
            <ul>
                <li><Link to="/" >Home</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
        </div>
    )
}

export default Header

从“React”导入React
从“react router dom”导入{Link}
函数头（）{
返回(

家
关于

)
}
导出默认标题

我有类似的主页和关于功能的内容，h1标签的标题不同。

import React from 'react'

function Home() {
    return (
        <div>
           <h1> Home </h1>
        </div>
    )
}

export default Home

从“React”导入React
函数Home（）{
返回(
家
)
}
导出默认主页

关于.js

import React from 'react'

function About() {
    return (
        <div>
            <h1>About </h1>
        </div>
    )
}

export default About

从“React”导入React
函数About（）{
返回(
关于
)
}
导出默认值关于

---

我不知道是否还有其他需要做的事情。

您的代码完全正常，只需重新定位路线，确保默认路线如下所示：

 <Router>
    <div className="App">
      <Switch>
      <Route path="/about" >
            <Header />
            <About />
        </Route>
        <Route path="/">
          <Header />
          <Home />
        </Route>
        
       
      </Switch>
    </div>
    </Router>

---

“react router dom”文档需要向读者指出这一点。

您需要使用精确的

谢谢，我已尝试切换路由的顺序和位置