React Router如何实现页面重定向？未登录访问个人页跳转首页

你当前的写法不正确。
React Router v6版本中，<Route>组件必须通过element属性接收路由对应的渲染内容，你写的代码没有指定element属性，直接把渲染逻辑作为无标识属性传入，路由无法正常解析渲染。

1. 最简行内写法 #

直接补全element属性即可实现基础重定向逻辑：

<Route 
  path="/profile" 
  element={login ? <Profile /> : <Navigate replace to="/" />} 
/>

注意：<Navigate>组件必须加replace属性，该配置会替换当前浏览器历史栈记录，避免用户点击返回按钮时再次跳转到/profile触发循环重定向。

2. 可复用的路由鉴权封装（推荐） #

如果项目里有多个需要登录校验的路由，重复写三目判断维护成本高，可以封装通用的鉴权路由组件：

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

// 受保护路由包装组件
function RequireAuth({ children, isLogin }) {
  if (!isLogin) {
    // 未登录重定向到首页
    return <Navigate replace to="/" />;
  }
  // 已登录放行，渲染目标页面
  return children;
}

路由配置时直接复用该组件即可：

<Route
  path="/profile"
  element={
    <RequireAuth isLogin={login}>
      <Profile />
    </RequireAuth>
  }
/>
// 其他需要鉴权的路由都可以套这个组件，比如订单页、个人设置页等

旧版本适配（React Router v5） #

如果你的项目用的是v5及更早版本，没有element属性和Navigate组件，需要用render属性搭配Redirect组件实现：

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

<Route
  path="/profile"
  render={() => login ? <Profile /> : <Redirect to="/" />}
/>

不要在组件顶层直接调用useNavigate钩子做同步跳转，这种写法很容易触发React渲染循环，优先用上面提到的声明式组件写法实现重定向，稳定性更高。

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