React项目启动时如何指定打开http://localhost:3000/login页面？

没问题！我之前也遇到过类似的需求，有几种简单的方法可以实现这个效果，你可以根据自己的情况选择：

方法一：通过package.json脚本指定打开的URL #

直接修改package.json里的start命令，利用BROWSER环境变量指定完整的目标URL：

"scripts": {
  "start": "BROWSER='http://localhost:3000/login' react-scripts start"
}

注意：如果是Windows系统，写法略有不同，需要去掉单引号：

"scripts": {
  "start": "BROWSER=http://localhost:3000/login react-scripts start"
}

方法二：使用.env环境变量文件 #

在项目根目录创建一个.env文件（如果还没有的话），添加以下内容：

BROWSER=http://localhost:3000/login

之后运行npm start时，浏览器就会自动打开http://localhost:3000/login了。这种方法的好处是不需要修改package.json，配置更灵活。

方法三：通过路由重定向实现（推荐长期方案） #

如果你希望用户无论访问根路径/还是直接打开应用，都自动跳转到登录页，可以结合react-router设置重定向路由：

首先确保你已经安装了react-router-dom：

npm install react-router-dom

然后在你的根组件（比如App.js）中添加重定向规则：

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Login from './components/Login'; // 你的登录组件

function App() {
  return (
    <Router>
      <Routes>
        {/* 根路径自动重定向到登录页 */}
        <Route path="/" element={<Navigate to="/login" replace />} />
        {/* 登录页路由 */}
        <Route path="/login" element={<Login />} />
        {/* 其他业务路由 */}
      </Routes>
    </Router>
  );
}

export default App;

这种方法不仅解决了启动时打开登录页的问题，还能确保用户在访问根路径时也自动跳转到登录页，更符合实际应用的需求。

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