React - URL被更新，但页面不呈现

Question

我正在学习React的初学者课程。导航。酒吧有两个选项-关于，主页。在点击栏，url得到更新，但页面保持不变，导航保持不变。没有错误。

App.js

import React from 'react';
import HomePage from './HomePage';
import About from './About';
import Header from './common/Header';
function App() {
function getPage() {
const route = window.location.pathname;
if (route === "about") return <About />;
console.log("hi");
return <HomePage />;   
}  
return(
<div className="container-fluid">
<Header>
{ getPage() }
</Header>      
</div>
);

}
export default App;

Header.js

import React from 'react';
//to navigate across the website
function Header(){
return (
<nav>
<a href="/"> Home </a> | <a href="/about"> About </a>
</nav>
);
}
export default Header;

index.js

import "bootstrap/dist/css/bootstrap.min.css";
import React from "react";
import {render} from "react-dom";
import App from "./components/App";
render(<App />, document.getElementById("root")); 

About.js

import React from 'react';
class About extends React.Component{
render (){
return(
<>
<h1> About </h1>
<p> This is the About Page </p>
</>
);
}
}    
export default About;

HomePage.js

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
function HomePage(){
return(
<div className="jumbotron">
<h1>
Welcome
</h1>
<p>
This is my first React Project
</p>

</div>
);

}
export default HomePage;

页面没有变化，只有URL更新了。

我已经尝试了很多解决方案，但没有一个工作到目前为止。

Answer 1

我猜它总是显示<HomePage />组件?

这是因为window.location.pathname返回一个带有斜杠的路径。所以route === "about"总是假的。您需要检查route === "/about"。

Answer 2

在getPage函数条件是错误的，它不是about，它将是/about只需更改if语句

中的条件这样的

if (route === "/about") return <About />;