React执行npm start启动时如何修改默认localhost路径跳转/home

修改package.json无法实现前端路由的默认跳转，该文件仅支持配置开发服务器的端口、绑定主机等服务端参数，路由跳转逻辑需要在React Router配置层实现。

方案1：路由配置重定向（推荐，开发/生产环境全生效） #

你当前使用的是React Router v6版本，直接对根路径/配置重定向规则即可，步骤如下：

• 从react-router-dom依赖中引入重定向组件Navigate
• 替换原有空的根路径路由配置，修改后的完整路由代码参考：

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
// 其余原有组件引入保持不变

<BrowserRouter>
  <Routes>
    {/* 替换原有空的/路由，配置重定向 */}
    <Route path="/" element={<Navigate to="/home" replace />} />
    <Route element={<ViewParentCustomer />} >
      <Route path={RouteTypes.REDIRECT_HOME} element={<Home/>} />
      <Route path={RouteTypes.ROUTE_OUR_HISTORY} element={<OurHistory />} />
      <Route path={RouteTypes.ROUTE_COMMAND_CUSTOMER_ACCOUNT} element={<ProtectedRoutes ><DetailCommand /></ProtectedRoutes>} />
      <Route path={RouteTypes.ROUTE_SIGNUP} element={<Registration />} />
      <Route path={RouteTypes.ROUTE_FORBIDDEN} element={<AccessForbidden />} /> 
    </Route>
  </Routes>
</BrowserRouter>

配置说明：

1. 请确认RouteTypes.REDIRECT_HOME的常量值为/home，如果值不同，将Navigate组件的to属性替换为对应实际路径即可
2. 添加replace属性是为了替换当前路由栈记录，避免用户点击浏览器返回按钮时回到根路径造成跳转死循环

方案2：仅开发环境启动自动打开/home（不推荐，生产不生效） #

如果仅需要本地执行npm start时浏览器自动打开/home地址，不需要考虑用户手动访问根路径的场景，可以修改package.json中的start脚本：
Mac/Linux系统修改为：

"scripts": {
  "start": "BROWSER=none react-scripts start && open http://localhost:3001/home"
}

Windows系统修改为：

"scripts": {
  "start": "set BROWSER=none&& react-scripts start && start http://localhost:3001/home"
}

该方案缺陷明显：用户手动输入http://localhost:3001访问时不会自动跳转，仅适合本地临时调试使用，正式场景优先选择方案1。

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