如何使用 React Router 显示完全独立的页面？ [重复]

Question

我正在使用 React 创建一个单页面前端项目，问题是我想创建一个应该单独渲染的类似页面的组件。

概念基本上是：

第1页：首页 主页及其组件/部分

第2页：关于我们页面 我打算创建的第二页应该单独呈现

但是当我单击导航栏中的“关于我们”项目时，它不会重定向到“关于”页面，而只是渲染我的标题和服务组件之间的组件

文件：APP.JS

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

// script
import './assets/js/script';

// components
import Header from './components/Header/Header';
import Newsletter from './components/Newsletter/Newsletter';
import Services from './components/Services/Services';
import Work from './components/Work/Work';
import WorkProcess from './components/WorkProcess/WorkProcess';
import About from './components/About/About';
import Testimonials from './components/Testimonials/Testimonials';
import Contact from './components/Contact/Contact';
import Footer from './components/Footer/Footer';
import AboutPage from './components/AboutPage/AboutPage';

// routes
import { BrowserRouter, Routes, Route, } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
       <Header />
       <Routes>
         <Route path="/about" element={<AboutPage />} />
       </Routes>  
       <Services />
       <Work />
       <WorkProcess />
       <Newsletter />
       <About />
       <Testimonials />
       <Contact />
       <Footer />
      </BrowserRouter>
    </div>
  );
}

export default App;

文件：Navbar.jsx

import React, { useState, useEffect } from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';
import { FaBars, FaTimes } from 'react-icons/fa';

const Navbar = () => {
    const [navToggler, setNavToggler] = useState(false);
    const closeNavbar = () => setNavToggler(false);
    const [scrollPos, setScrollPos] = useState(0);
    
    const handleScroll = () => {
        setScrollPos(document.documentElement.scrollTop);
    };

    useEffect (() => {
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);

    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        })
    }
    const scrollToSection = (id) => {
        const section = document.getElementById(id);
        section.scrollIntoView({ behavior: 'smooth', block: 'center' });
      };
    
  return (
    <nav className={scrollPos > 100 ? 'navbar scrolled' : 'navbar'}>
        <div className='container'>
            <div className='navbar-content'>
                <div className='brand-and-toggler flex flex-sb'>
                    <Link to = "/" className='navbar-brand text-uppercase fw-7 text-white ls-2 fs-22' onClick={scrollToTop}>Ophidium</Link>
                    <button type = "button" className='navbar-open-btn text-white' onClick={() => setNavToggler(!navToggler)}>
                        <FaBars size = {30}/>
                    </button>

                    <div className={navToggler ? "navbar-collapse show-navbar-collapse" : "navbar-collapse"}>
                        <button type = "button" className='navbar-close-btn text-white' onClick={closeNavbar}>
                            <FaTimes size = {30}/>
                        </button>
                        <ul className='navbar-nav'>
                        <li className='nav-item'>
                            <Link to="/" className='nav-link text-white ls-1 text-uppercase fw-6 fs-22' onClick={() => scrollToSection('home')}>Home</Link>
                        </li>
                                <li className='nav-item'>
                            <Link to="/services" className='nav-link text-white ls-1 text-uppercase fw-6 fs-22' onClick={() => scrollToSection('services')}>Services</Link>
                                </li>
                        <li className='nav-item'>
                            <Link to="#workprocess" className='nav-link text-white ls-1 text-uppercase fw-6 fs-22' onClick={() => scrollToSection('workprocess')}>Work Process</Link>
                        </li>
                        <li className='nav-item'>
                                <Link to = "/about" className='nav-link text-white ls-1 text-uppercase fw-6 fs-22'>About Us</Link>
                            </li>
                        <li className='nav-item'>
                            <Link to="#socialmedia" className='nav-link text-white ls-1 text-uppercase fw-6 fs-22' onClick={() => scrollToSection('socialmedia')}>Social Media</Link>
                        </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>
  )
}

export default Navbar

文件：AboutPage.jsx

import React from 'react'

const AboutPage = () => {
  return (
    <div>
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
  )
};

export default AboutPage

项目打印：主页 (https://i.sstatic.net/TMBhhXyJ.png)

点击关于我们后 (https://i.sstatic.net/65cpdPwB.png)

已经尝试路由，期望组件单独渲染，但安装后它只是弹出在主页中。

Answer 1

React Router 有点像一个奇特的 switch 语句，用于根据 URI 有条件地渲染组件。它可以让您简化页面的创建，通过重用页眉、导航、页脚等内容，并且仅更改主要内容（例如主页信息或关于页面信息）。它不需要关心其他组件，或者在一堆地方复制这些其他组件，从而使这些“内部”组件变得更简单。

如果您在导航到 /about 时想要一个完全不同的页面，那么 Router 组件必须位于应用程序组件树的较高位置，并包装整个组件页面，例如：

function AboutPage() { ... }

function Main() {
   return (
      <div className="App">
      <BrowserRouter>
       <Header />
       <Services />
       <Work />
       <WorkProcess />
       <Newsletter />
       <About />
       <Testimonials />
       <Contact />
       <Footer />
      </BrowserRouter>
    </div>
   )
}

function App() {
  return (
    <div>
       <Routes>
         <Route path="/about" element={<AboutPage />} />
         <Route path="/" element={<Main />} />
       </Routes>  
    </div>
  );
}