React中<Routes>仅显示单个路由的问题求助

你的问题根源在于通配符路由的顺序错误：React Router 的 <Routes> 组件会按照从上到下的顺序匹配路由规则，path="*" 是全局通配符，会匹配所有路径，把它放在最前面会直接拦截所有请求，导致后面的 teacher 路由永远无法被匹配到。

修正后的 App 代码 #

import { Routes, Route } from "react-router-dom";
import Home from './pages/Home';
import Teacher from "./pages/TeacherComponent";
import Navbar from "./pages/Navbar";
import { StrictMode } from 'react';

const App = () => {
  return (
    <StrictMode>
      <div className="mx-12 my-4 rounded px-8 py-4 bg-fuchsia-100 h-full">
        <Navbar/>
        <Routes>
          {/* 先匹配具体路由 */}
          <Route path="/teacher" element={<Teacher />}/>
          {/* 通配符路由放到最后，处理未匹配的路径 */}
          <Route path="*" element={<Home />} />
        </Routes>
      </div>
    </StrictMode>
  );
};

额外检查项 #

• 确保路由上下文存在：你的根组件（通常是 index.js）需要用 <BrowserRouter> 包裹整个应用，否则路由系统无法正常工作：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { BrowserRouter } from 'react-router-dom';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
  

• 正确使用路由链接：Navbar 中的跳转链接必须使用 React Router 提供的 <Link> 组件，而不是原生 <a> 标签，否则会触发页面刷新，导致路由失效：

  // Navbar.jsx 示例
  import { Link } from 'react-router-dom';
  
  const Navbar = () => {
    return (
      <nav>
        <Link to="/">首页</Link>
        <Link to="/teacher">教师页面</Link>
      </nav>
    );
  };
  

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