React应用启动时根路径未加载App组件，默认显示NotFound的问题

问题根源 #

你的package.json里配置了"homepage": "https://MohitRaikwar.github.io/todos-list"，这说明你的应用是部署在**子路径/todos-list**下的。react-router-dom v6的路由匹配是严格对应浏览器URL路径的：

• 你路由里写的path="/"，匹配的是域名的根路径（比如本地开发时的http://localhost:3000/）
• 但npm start启动后，应用默认加载的是http://localhost:3000/todos-list（因为homepage的配置）
• 这个实际访问路径和路由里的/不匹配，所以就触发了通配符*对应的NotFound组件

你临时加的<Route path="/todos-list" element={<Navigate to="/" />} />能生效，是因为它先匹配了当前的访问路径，跳转到/后开发服务器做了隐式适配，但这不是最优解。

正确的解决方式 #

在Router组件（即你导入的BrowserRouter）上添加basename属性，值为应用的子路径"/todos-list"，让所有路由都基于这个前缀匹配：

修改MyRouter.js：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

export default function MyRouter() {
  return (
    <Router basename="/todos-list"> {/* 新增basename配置 */}
      <Header title="MyTodosList" />
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound/>}/>
      </Routes>
      <Footer />
    </Router>
  );
}

设置完成后：

• 路由里的path="/"会匹配http://localhost:3000/todos-list
• path="/about"会匹配http://localhost:3000/todos-list/about
• 不管是本地开发还是部署到GitHub Pages，路由都能正确匹配，也不需要那个临时跳转路由了。

额外说明 #

如果之后要把应用部署到根域名下，只需要删掉package.json里的homepage配置，同时去掉Router的basename属性即可，路由规则不需要改动。

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