React Router v6：如何让SecondPage作为独立新页面打开？

问题原因 #

你当前的App.js里，Header、Zagolovok、Footer等组件是直接渲染在根容器中，不属于任何路由规则。这意味着不管你切换到哪个路由，这些组件都会一直显示在页面上。而Routes组件里的路由元素会追加在这些固定组件之后渲染，所以SecondPage会出现在Footer下方，而不是替换整个页面内容。

解决步骤 #

1. 重构路由结构 #

把首页的所有固定组件（Header到Footer）放到一个路由的element中，作为首页内容。让Routes管理所有页面的切换逻辑，确保每个路由只渲染对应页面的内容。

修改后的App.js代码：

import React from 'react';
import "./App.css";
import { Route, Routes } from 'react-router-dom';
import { Header } from './Header';
import { Advantages } from './Advantages';
import { Zagolovok } from './Zagolovok';
import { Something } from './Something';
import { Courses } from './Courses';
import { Teachers } from './Teachers';
import { Fiq } from './Fiq';
import { Footer } from './Footer';
import { SecondPage } from './SecondPage';

function App() {
  return (
    <div className="App" style={{ color: 'white', fontFamily: 'Arial, sans-serif' }}>
      <Routes>
        {/* 首页路由：包含所有首页固定组件 */}
        <Route path="/" element={
          <>
            <Header />
            <Zagolovok />
            <Advantages />
            <Courses />
            <Teachers />
            <Something />
            <Fiq />
            <Footer />
          </>
        } />
        {/* Courses页面路由：按需决定是否包含公共组件 */}
        <Route path="/courses" element={
          <>
            <Header />
            <Courses />
            <Footer />
          </>
        } />
        {/* SecondPage页面路由：仅渲染自身内容 */}
        <Route path="/secondpage" element={<SecondPage />} />
      </Routes>
    </div>
  );
};

export default App;

2. 调整Link跳转行为（可选） #

你的Courses页面里的Link加了target="_blank"，会在新窗口打开页面。如果希望在当前页面跳转，去掉这个属性即可：

<Link to="/secondpage" rel="noopener noreferrer">
  <button className="register-button" onClick={handleRegistration}>
    Registration
  </button>
</Link>

补充说明 #

如果需要多个页面共享Header和Footer，可以把这两个组件抽出来放在Routes外面，路由切换只替换中间内容，示例如下：

function App() {
  return (
    <div className="App" style={{ color: 'white', fontFamily: 'Arial, sans-serif' }}>
      <Header />
      <Routes>
        <Route path="/" element={
          <>
            <Zagolovok />
            <Advantages />
            <Courses />
            <Teachers />
            <Something />
            <Fiq />
          </>
        } />
        <Route path="/courses" element={<Courses />} />
        <Route path="/secondpage" element={<SecondPage />} />
      </Routes>
      <Footer />
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Amir Saken