React报错No routes matched location "/"，求原因及解决方案

错误原因 #

你配置的路由中仅存在path="Home"的路由规则，但当前访问的是根路径/，React Router无法找到匹配该路径的路由，因此抛出No routes matched location "/"错误。

解决办法 #

方法1：将Home路由绑定到根路径 #

直接修改Route的path属性为"/"，访问根路径时即可匹配到Home组件：

import { BrowserRouter, Routes, Route } from "react-router-dom";
// import Product from "./pages/Product";
import Home from "./pages/Home";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

方法2：添加根路径重定向（保留/Home路径） #

若需要保留/Home的访问路径，同时让根路径自动跳转到该页面，可使用Navigate组件实现重定向：

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
// import Product from "./pages/Product";
import Home from "./pages/Home";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/Home" element={<Home />} />
        <Route path="/" element={<Navigate to="/Home" />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

方法3：设置兜底路由（避免无匹配场景） #

可以添加一个匹配所有未定义路径的兜底路由，比如返回404页面，防止出现类似的无匹配错误：

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
// import Product from "./pages/Product";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound"; // 假设你已创建404组件

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/Home" element={<Home />} />
        <Route path="/" element={<Navigate to="/Home" />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

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