React Router问题：点击About us链接后页面未跳转仅显示在当前页下方

问题原因：你的代码将包含About us链接的footer和<Routes>直接并列放在<BrowserRouter>根节点下，导致footer会始终渲染在页面中。点击链接跳转时，Aboutus组件会被追加渲染到footer的下方，而非替换页面内容。

解决方案：调整布局结构，让路由控制的内容区域与footer分离，以下是两种实现方式：

方式一：使用全局布局组件（推荐） #

通过布局组件统一管理全局元素（如footer、header），路由匹配的页面组件渲染在布局的内容区域：

import { BrowserRouter, Routes, Route, Outlet, Link } from 'react-router-dom';
import Aboutus from './Aboutus';
// 假设你有首页组件
import Home from './Home';

// 全局布局组件
const Layout = () => {
  return (
    <div className="app-container">
      {/* 这里可以添加全局头部 */}
      <Outlet /> {/* 路由匹配的页面组件会渲染在此处 */}
      {/* footer固定在布局底部 */}
      <div className="footer-col">
        <h4 className="h">About Order</h4>
        <ul className="u1">
          <li>
            <Link to="/aboutus">About us</Link>
          </li>
          <li><a>Track My Orders</a></li>
          <li><a>Checkout</a></li>
          <li><a>Contact Us</a></li>
        </ul>
      </div>
    </div>
  );
};

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 所有路由都使用Layout布局 */}
        <Route element={<Layout />}>
          <Route path="/aboutus" element={<Aboutus />} />
          <Route path="/" element={<Home />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

方式二：直接分离内容区域与footer #

如果不需要复杂布局，可直接将footer放在路由内容区域之外：

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Aboutus from './Aboutus';
import Home from './Home';

function App() {
  return (
    <BrowserRouter>
      {/* 路由内容区域，跳转时替换此处内容 */}
      <div className="page-content">
        <Routes>
          <Route path="/aboutus" element={<Aboutus />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
      {/* footer始终显示在页面底部 */}
      <div className="footer-col">
        <h4 className="h">About Order</h4>
        <ul className="u1">
          <li>
            <Link to="/aboutus">About us</Link>
          </li>
          <li><a>Track My Orders</a></li>
          <li><a>Checkout</a></li>
          <li><a>Contact Us</a></li>
        </ul>
      </div>
    </BrowserRouter>
  );
}

export default App;

说明：两种方式都能让路由跳转时，页面内容区域替换为Aboutus组件，footer保持在固定位置。如果需要跳转后隐藏footer，只需将footer移到特定页面组件中，而非全局渲染。

内容的提问来源于stack exchange，提问作者Siddhi Chavda