React Router报错No routes matched location "/"问题求助

你的报错核心原因是React Router v6的API使用错误，和Babel、Webpack配置无关，具体问题有两个：

1. Route组件属性错误：React Router v6中，Route组件定义路径的属性是path，不是to（to是Link组件的专属属性）
2. 导入路径错误：Route和Routes应该从react-router-dom导入，而非react-router

修改后的App.js代码如下：

import { Route, Routes } from "react-router-dom"; // 修正导入路径
import React from "react";

const Lol = () => {
  return <h1>Lol</h1>
}

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Lol />} /> {/* 把to替换为path */}
    </Routes>
  );
};

export default App;

检查你的Webpack配置：devServer.historyApiFallback: true和output.publicPath: "/"已经正确配置，单页应用的路由 fallback 逻辑没问题；Babel的preset配置也符合React项目的基本要求，无需调整。

修改后重新启动devServer，访问/就能正常匹配到Lol组件了。

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