React in Routes 仅显示一条路线

Question

我一直在尝试将组件连接到链接，但是每当我在其中写入多个路径时 反应似乎忽略它，并且不响应任何内容。也用于查看程序内部发生了什么 这是我的代码：

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="*"  element={<Home />} />
        <Route path="teacher" element={<Teacher />}/>
      </Routes>
    </div>
    </StrictMode>

  );
};```
[Screenshot from plugin analysing script](https://i.stack.imgur.com/ZMurr.png)](https://i.stack.imgur.com/ZMurr.png)

I've tried changing react-router-dom version, to use <Switch>, but it doesn't work too

Answer 1

路由通常按照您定义的顺序进行处理。在这里，您将拥有一条包罗万象的路线作为第一个条目

<Route path=* 

。因此，所有路由都会与此匹配，并且始终会显示

Home

组件。

要解决此问题，请切换路由条目的顺序，以便最具体的条目位于顶部

 <Routes>
  <Route path="teacher" element={<Teacher />}/>
  <Route path="*"  element={<Home />} />
</Routes>