React Router路由失效：默认Home组件不显示且导航无响应

数据老陈

2026-6-19

React Router导航失效与默认路由不显示问题修复

你的问题主要出在三个核心点：react-router-dom v6的Route语法错误、导航使用普通标签破坏单页路由机制，以及Router上下文未覆盖导航组件。以下是具体修复步骤：

一、修正App.js中的路由配置

react-router-dom v6版本彻底变更了Route组件的使用方式，不再支持component属性，需改用element传递组件；同时必须将Navigation放入BrowserRouter内部，确保路由相关组件能获取上下文。

修改后的App.js代码：

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import Navigation from "./Pages/Navigation";
import Home from './Pages/Home';
import Footer from './Pages/Footer';
import Projects from './Pages/Projects';
import Contact from './Pages/Contact';
import Policy from './Pages/Privacy';
import 'bootstrap/dist/css/bootstrap.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter> {/* 用Router包裹整个应用 */}
      <div>
        <Navigation /> {/* 导航组件现在处于路由上下文内 */}
        <Routes>
          {/* 使用element属性传递组件，v6不再支持component */}
          <Route path="/" element={<Home />} />
          <Route path="/home" element={<Home />} />
          <Route path="/Projects" element={<Projects />} />
          <Route path="/Contact" element={<Contact />} />
          <Route path="/Privacy" element={<Policy />} /> {/* 补充隐私政策路由 */}
        </Routes>

        <br></br>
        <br></br>
        <br></br>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

export default App;

普通标签会触发页面全量刷新，完全绕过React Router的单页导航逻辑，必须改用react-router-dom提供的Link组件。

修改后的Navigation.js关键部分代码：

/* eslint-disable jsx-a11y/anchor-is-valid */
import React, {useState} from 'react'
import { MenuIcon, XIcon } from '@heroicons/react/outline';
import { FaUserAlt, FaSignInAlt } from 'react-icons/fa';
import { Link } from 'react-router-dom'; // 导入Link组件

function Navigation() {
  const [nav, setNav] = useState(false)
    
  const handleClick = () => setNav(!nav)

  const handleClose = () => {
    setNav(false);
  };

  return (
    // Navigation bar on large screen
    <div className='w-screen bg-gray-100 h-[70px] z-10 fixed drop-shadow-lg'>
      <div className='px-2 flex justify-between items-center w-full h-full'>
        <div className='flex items-center'>
          <h1 className='text-3xl font-bold text-black mr-4 sm:text-4xl'>Megax</h1>
          <ul className='hidden text-black md:flex'>
            <li className='cursor-pointer hover:bg-white hover:text-green-600 hover:rounded-lg'>
              <Link to="/home" onClick={handleClose}>Home</Link> {/* 替换为Link */}
            </li>

            <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
              <Link to="/Projects" onClick={handleClose}>Projects</Link>
            </li>
        
            <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
              <Link to="/Privacy" onClick={handleClose}>Privacy</Link>
            </li>
        
            <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
              <Link to="/Contact" onClick={handleClose}>Contact</Link>
            </li>
          </ul>
        </div>
        {/* 其他登录/账户按钮代码保持不变 */}

      {/* Navigation on small screens */}
      <ul className={!nav ? 'hidden' : 'absolute bg-zinc-200 w-full px-8'}>
        <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
          <Link to="/home">Home</Link> {/* 小屏幕导航也替换为Link */}
        </li>

        <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
          <Link to="/Projects">Projects</Link>
        </li>

        <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
          <Link to="/Privacy">Privacy</Link>
        </li>

        <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
          <Link to="/Contact">Contact</Link>
        </li>
      </ul>
    </div>
  )
}

export default Navigation

核心注意事项

react-router-dom v6完全废弃了v5的component、render等属性，统一使用element={<Component />}传递路由组件。
所有涉及路由导航的组件（如Navigation）必须被BrowserRouter或Router包裹，否则Link无法获取路由上下文。
单页面应用中永远不要用普通标签做内部导航，必须使用Link或NavLink组件，避免页面全量刷新导致状态丢失。

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

React Router路由失效：默认Home组件不显示且导航无响应

一、修正App.js中的路由配置 #

二、替换Navigation.js中的标签为Link组件 #

核心注意事项 #

一、修正App.js中的路由配置

二、替换Navigation.js中的标签为Link组件

核心注意事项