javascript - React - URL 已更新，但页面未呈现

Question

我正在学习关于 React 的初学者课程。导航。栏有两个选项——关于、主页。单击该栏时，网址会更新，但页面保持不变并且导航保持不变。我没有错误。

应用程序.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;

页眉.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")); 

关于.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;

主页.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 得到更新。

我在 SO 上尝试了很多解决方案，但到目前为止都没有。

标签： javascriptreactjsurlrendering

Answer 1

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

那是因为window.location.pathname返回带有前导斜杠的路径。所以route === "about"永远都是假的。你需要检查一下route === "/about"。