如何修改React项目yarn/npm start启动后的默认URL路由

一、启动自动跳转至/Login #

在路由配置中，将根路径(/)设置为条件重定向：未登录时跳转到/Login，已登录时直接进入/Home。同时给登录页路由添加登录状态校验，避免已登录用户重复进入登录页。

修改Routers.tsx示例：

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Login from './pages/Login';
import Home from './pages/Home';

const Routers = () => {
  // 根据实际登录状态判断，比如从localStorage读取token
  const isLoggedIn = !!localStorage.getItem('authToken');

  return (
    <Router>
      <Routes>
        {/* 根路径重定向 */}
        <Route 
          path="/" 
          element={isLoggedIn ? <Navigate to="/Home" /> : <Navigate to="/Login" />} 
        />
        {/* 登录页路由：已登录则跳转到Home */}
        <Route 
          path="/Login" 
          element={isLoggedIn ? <Navigate to="/Home" /> : <Login />} 
        />
        {/* 主页路由：未登录则跳转到Login */}
        <Route 
          path="/Home" 
          element={isLoggedIn ? <Home /> : <Navigate to="/Login" />} 
        />
        {/* 404页面重定向到登录页 */}
        <Route path="*" element={<Navigate to="/Login" />} />
      </Routes>
    </Router>
  );
};

export default Routers;

二、登录成功后跳转至/Home #

找到登录组件（比如Login.tsx）中的登录成功逻辑，将原来跳转到/的代码替换为跳转到/Home：

import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = async () => {
    // 这里是你的登录请求逻辑
    const loginSuccess = await yourLoginApi();
    if (loginSuccess) {
      // 存储登录状态，比如token到localStorage
      localStorage.setItem('authToken', 'your-token-value');
      // 跳转至Home页面
      navigate('/Home');
    }
  };

  return (
    // 登录页UI代码
    <div>
      {/* 表单和按钮 */}
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

export default Login;

三、App.tsx 简化配置 #

确保App.tsx仅渲染路由组件即可，无需额外配置：

import Routers from './Routers';

function App() {
  return (
    <div className="App">
      <Routers />
    </div>
  );
}

export default App;

关键说明 #

• 全程无需修改package.json的homepage字段，所有配置均基于前端路由实现
• 路由重定向依赖react-router-dom的Navigate组件，确保你已安装该依赖（yarn add react-router-dom或npm install react-router-dom）
• 登录状态判断可根据实际项目调整，比如使用状态管理工具（Redux、Zustand等）存储登录信息，而非localStorage

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