react-router-dom集成问题：路由跳转失效仅显示首页内容

问题原因分析 #

你的代码存在两处核心问题，导致路由无法正常跳转：

1. 路由结构错误：将所有页面路由嵌套在path="/"的Home路由下，但Home组件未使用<Outlet />渲染子路由内容，且这些页面应为同级路由而非嵌套关系。
2. Link路径不匹配：Navbar中Link的to属性值为'Crew'，与路由定义的'/crew'（小写+斜杠开头）不一致，路由路径区分大小写。

具体修改步骤 #

1. 修正App.js的路由结构

将嵌套路由改为同级路由，确保每个页面路由直接作为<Routes>的子元素：

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Constants/Home/Home'
import Crew from './Constants/Crew/Crew'
import Technology from './Constants/Technology/Technology'
import Destination from './Constants/Destination/Destination'
import Navbar from './Components/Navbar';

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/home" element={<Home />} />
          <Route path="/crew" element={<Crew />} />
          <Route path="/technology" element={<Technology />} />
          <Route path="/destination" element={<Destination />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

2. 修正Navbar.js的Link路径

将Link的to属性改为与路由定义一致的'/crew'，并移除无用的导入：

import React from 'react'
import logo from '../assets/shared/logo.svg'
import { Link } from 'react-router-dom'

function Navbar() {
  return (
    <div className='app_navbar'>
      <div className='app_navbar_img'>
        <Link to='/crew'>
          <img src={logo} alt='logo' />
        </Link>
      </div>

      <div className='app_navbar_line'/>

      <div className='app__navbar__lists'>
        <ul>
        </ul>
      </div>
    </div>
  )
}

export default Navbar

原理说明 #

• 同级路由：你的页面都是独立的顶级页面，无需嵌套在Home路由下，直接配置为<Routes>的子元素即可匹配对应路径。
• 路径匹配：react-router-dom的路由路径严格区分大小写，且Link的to属性需与路由path完全一致（包括开头的斜杠），才能触发正确的路由跳转。

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