ReactJS SPA开发：BrowserRouter配置及登录后首页权限控制问询

别担心，我从基础配置到登录跳转、路由保护一步步给你讲，跟着做就行：

1. 先安装依赖 #

首先得装react-router-dom，这是React官方的路由库，BrowserRouter就在里面：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

2. 配置根路由（包裹整个应用） #

找到你的根组件（一般是App.jsx或者main.jsx），用BrowserRouter把所有内容包起来，然后定义基础路由规则：

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Login from './pages/Login';
import Home from './pages/Home';
import PrivateRoute from './components/PrivateRoute'; // 后面会写这个组件

function App() {
  return (
    <Router>
      <Routes>
        {/* 公开路由：任何人都能访问 */}
        <Route path="/login" element={<Login />} />
        
        {/* 受保护路由：只有登录后才能访问 */}
        <Route path="/home" element={<PrivateRoute><Home /></PrivateRoute>} />
        
        {/* 默认跳转：访问根路径时跳去登录页 */}
        <Route path="/" element={<Navigate to="/login" />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 实现登录成功后的跳转逻辑 #

在你的Login组件里，用useNavigate钩子来实现跳转，同时要保存登录状态（比如存在localStorage里，防止刷新页面后丢失）：

import { useState, useNavigate } from 'react';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleLogin = async (e) => {
    e.preventDefault();
    // 这里替换成你的真实后端登录接口调用
    const isAuthenticated = await fakeLoginAPI(username, password);
    
    if (isAuthenticated) {
      // 保存登录状态到localStorage
      localStorage.setItem('isLoggedIn', 'true');
      // 跳转到首页
      navigate('/home');
    } else {
      alert('用户名或密码错误');
    }
  };

  // 模拟后端登录接口，实际开发中删掉这段
  const fakeLoginAPI = (user, pwd) => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(user === 'admin' && pwd === '123456');
      }, 500);
    });
  };

  return (
    <div className="container mt-5">
      <form onSubmit={handleLogin}>
        <div className="mb-3">
          <label className="form-label">用户名</label>
          <input 
            type="text" 
            className="form-control" 
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div className="mb-3">
          <label className="form-label">密码</label>
          <input 
            type="password" 
            className="form-control" 
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button type="submit" className="btn btn-primary">登录</button>
      </form>
    </div>
  );
}

export default Login;

4. 写一个受保护路由组件（PrivateRoute） #

这个组件用来判断用户是否登录，没登录的话直接跳回登录页：

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

function PrivateRoute({ children }) {
  // 从localStorage获取登录状态
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
  
  // 如果已登录，渲染子组件（也就是Home页面）；否则跳去登录页
  return isLoggedIn ? children : <Navigate to="/login" />;
}

export default PrivateRoute;

5. 给首页加Bootstrap导航栏 #

在Home组件里，用NavLink来做导航链接，它会自动给当前活跃的链接加active类，刚好适配Bootstrap的样式：

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

function Home() {
  const navigate = useNavigate();

  const handleLogout = () => {
    // 清除登录状态
    localStorage.removeItem('isLoggedIn');
    // 跳回登录页
    navigate('/login');
  };

  return (
    <>
      {/* Bootstrap导航栏 */}
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
        <div className="container-fluid">
          <NavLink className="navbar-brand" to="/home">我的SPA</NavLink>
          <div className="collapse navbar-collapse">
            <div className="navbar-nav">
              <NavLink 
                className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} 
                to="/home/dashboard"
              >
                仪表盘
              </NavLink>
              <NavLink 
                className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} 
                to="/home/profile"
              >
                个人中心
              </NavLink>
              <NavLink 
                className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} 
                to="/home/settings"
              >
                设置
              </NavLink>
            </div>
          </div>
          <button className="btn btn-outline-light" onClick={handleLogout}>退出登录</button>
        </div>
      </nav>

      {/* 首页内容区域 */}
      <div className="container mt-4">
        <h1>欢迎来到首页！</h1>
      </div>
    </>
  );
}

export default Home;

一些额外的小提示 #

• 如果你有更多子路由（比如仪表盘、个人中心），可以在Home组件里嵌套Routes和Route来实现
• 复杂应用里，登录状态可以用Context或者Redux来管理，比localStorage更灵活
• 生产环境中不要用localStorage存敏感信息，比如用户密码，只存后端返回的token即可

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