React路由无法跳转至不同路径问题排查

问题根源及修复步骤： #

• 未用BrowserRouter包裹路由组件
  React Router的路由系统必须在BrowserRouter提供的上下文环境中才能正常工作，你的App.js中仅导入了BrowserRouter但未用它包裹<Routes>组件。

• 组件命名违反React规范
  React要求自定义组件必须以大写字母开头，你导入的allUsers、airportEmployee、airlineEmployee均为小写，会被React解析为原生HTML标签而非自定义组件，导致无法渲染内容。

• 使用原生href而非React Router的Link组件
  原生<a>标签的href会触发整页刷新，破坏单页应用的路由逻辑，需替换为react-router-dom提供的<Link>组件，通过to属性指定跳转路径。

修改后的代码： #

App.js

import './App.css';
import { Routes, Route } from "react-router-dom";
import { BrowserRouter } from 'react-router-dom';
import React from "react";
import Home from './components/Home';
import AllUsers from './pages/allUsers/allUsers'; // 组件名改为大写开头
import AirportEmployee from './pages/AirportEmployee/airportEmployee';
import AirlineEmployee from './pages/AirlineEmployee/airlineEmployee';

function App() {
  return (
    <BrowserRouter> {/* 用BrowserRouter包裹整个路由系统 */}
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/allUsers" element={<AllUsers />} /> {/* 对应大写组件名 */}
          <Route path="/airline-employee" element={<AirlineEmployee />} />
          <Route path="/airport-employee" element={<AirportEmployee />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Home.js

import { Link } from 'react-router-dom'; // 导入react-router-dom的Link组件
import Breadcrumbs from '@mui/material/Breadcrumbs'; // 确保已导入Material UI的Breadcrumbs组件

const Home = () => {
  return (
    <Breadcrumbs aria-label="breadcrumb">
      <Link
        underline="hover"
        color="inherit"
        to="/allUsers" // 用to属性替代原生href
        fontSize="large"
      >
        All Users
      </Link>
      <Link
        underline="hover"
        color="inherit"
        to="/airport-employee"
        fontSize="large"
      >
        Airport Employee
      </Link>
      <Link
        underline="hover"
        color="inherit"
        to="/airline-employee"
        fontSize="large"
      >
        Airline Employee
      </Link>
    </Breadcrumbs>
  );
};

export default Home;

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