React登录状态下如何限制路由 访问根路径自动跳转至首页

核心就是给根路径/增加路由级的登录态校验：匹配到根路径时先判断用户登录状态，已登录直接替换路由跳转到/home，未登录才正常渲染根路径对应的落地页，从根源避免空白页问题。 #

React Router v6 写法（当前主流版本） #

v6 官方提供的Navigate组件专门用来做路由重定向，直接在路由配置里写条件判断即可，不需要额外封装复杂逻辑：

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
// 替换成你项目里实际的页面组件
import Landing from './pages/Landing';
import Home from './pages/Home';
import Login from './pages/Login';

// 替换成你项目里实际的登录态判断逻辑：从全局状态、localStorage、cookie里取校验信息都可以
const checkLoginStatus = () => {
  return Boolean(window.localStorage.getItem('valid_user_token'))
}

export default function AppRouter() {
  const isLogged = checkLoginStatus();
  return (
    <BrowserRouter>
      <Routes>
        {/* 根路径加状态判断 */}
        <Route
          path="/"
          element={isLogged ? <Navigate to="/home" replace /> : <Landing />}
        />
        <Route path="/home" element={<Home />} />
        <Route path="/login" element={<Login />} />
        {/* 其余业务路由保持原有写法即可 */}
      </Routes>
    </BrowserRouter>
  )
}

这里必须加replace属性，否则重定向后浏览器历史栈会保留根路径记录，用户点返回键会反复触发重定向，导致返回功能失效。

如果项目已经封装了通用的路由守卫组件，直接给根路径套上游客守卫即可——守卫逻辑统一为「已登录用户不允许访问游客专属页面（落地页、登录页、注册页），直接重定向到首页」，后续维护也更方便。 #

React Router v5 写法（旧版本） #

v5 用Redirect组件实现重定向，逻辑和v6一致，仅API名称有区别：

import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import Landing from './pages/Landing';
import Home from './pages/Home';

const isLogged = Boolean(window.localStorage.getItem('valid_user_token'));

export default function AppRouter() {
  return (
    <BrowserRouter>
      <Switch>
        <Route
          exact
          path="/"
          render={() => isLogged ? <Redirect to="/home" /> : <Landing />}
        />
        <Route path="/home" component={Home} />
        {/* 其余业务路由保持原有写法即可 */}
      </Switch>
    </BrowserRouter>
  )
}

注意事项 #

• 不要把重定向逻辑写在页面组件的useEffect里，那样会先渲染一瞬间空白/落地页内容再触发跳转，用户体验很差，必须在路由匹配阶段直接做判断返回重定向组件。
• 登录态校验逻辑要和项目全局保持一致，比如需要判断token是否过期、是否被踢下线，不要只判断本地有没有存token字段，避免异常状态下的跳转错误。
• 如果项目用了路由懒加载，要确保登录态获取逻辑在路由初始化前就执行完成，避免首屏判断错误。

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