React-Router-Dom问题：Home组件始终显示在导航页面底部

你的问题核心是Home组件被直接渲染在App组件中，不受路由控制，所以无论切换到哪个导航页面，它都会始终显示在底部。下面是具体的修复步骤和代码：

1. 重构App.js：统一管理路由 #

将Home组件移入路由规则中，同时把BrowserRouter提升到App组件层级，确保整个应用共享路由上下文：

import React from "react";
import './styles/global.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from "./components/navbar/Navbar";
import Home from "./pages/Home";
import About from "./pages/About";
import SearchPage from "./pages/SearchPage";
import Contact from "./pages/Contact";

function App() {
  return (
    <BrowserRouter>
      <div className="app">
        <Navbar />
        {/* 所有路由页面统一在这里渲染 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path='/search' element={<SearchPage />} />
          <Route path='/about' element={<About />} />
          <Route path='/contact' element={<Contact />} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}

export default App;

2. 简化Navbar组件：只保留导航链接 #

移除Navbar中的BrowserRouter和Routes，因为路由上下文已经由App组件提供，Navbar只负责展示导航链接即可：

import React from 'react';
import { Link } from 'react-router-dom';
import './navbar.css';

function Navbar() {
  return (
    <div className='navbar'>
      <h2>Nicole's Blog.</h2>
      <div className='navbar__list'>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/search">Search</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </div>
    </div>
  )
}
export default Navbar

修复逻辑说明 #

• 原来的App.js中直接渲染<Home />，导致它脱离路由控制，无论路由切换到哪里都会持续显示；
• 将所有页面（包括Home）都放入Routes的Route规则中，只有当路径匹配时才会渲染对应的组件；
• 把BrowserRouter放在App外层，确保整个应用都处于路由环境中，避免路由上下文隔离的问题。

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