React Router v4路由问题求助：认证用户无法访问/profile路由

不用道歉啦，新手碰路由逻辑踩坑太正常了😉

咱们先拆解你的问题：已登录用户访问/profile会被重定向到/，这说明你的路由匹配逻辑里，/profile没有命中对应的<Route>，直接走到了最后的兜底重定向规则。

可能的问题原因及解决方案 #

1. React Router版本不兼容（最大概率）

如果你的项目用的是React Router v6，那你的写法就不符合新版本规范了：

• v6里不再支持component属性，要改用element传入组件实例（比如element={<Home />}）
• 旧的Switch组件被替换成了Routes
• exact属性被移除了（v6默认就是精确匹配，除非用*做前缀匹配）

如果是这个情况，修改已登录用户的路由配置如下：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/profile" element={<Profile />} />
  <Route path="*" element={<Redirect to="/" />} />
</Routes>

2. 路由顺序或细节错误（针对v5及更早版本）

如果你的项目用的是v5，理论上你的代码逻辑是能正常匹配/profile的，但可以检查这几个点：

• 确认<Route path="/profile" exact component={Profile}/>确实写在兜底重定向的<Route>前面（Switch是按顺序匹配，先匹配到的路由会优先渲染，兜底路由必须放在最后）
• 检查Profile组件是否正确导入，有没有拼写错误
• 确认你访问的路径确实是/profile，没有多余的后缀或者拼写失误

额外优化建议 #

可以把登录校验的逻辑抽成单独的PrivateRoute组件，让路由配置更简洁清晰，也不容易出错：

const PrivateRoute = ({ component: Component, user, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      user ? <Component {...props} /> : <Redirect to="/login" />
    }
  />
);

然后你的路由配置可以简化成：

<Router>
  <Switch>
    <Route path="/login" exact component={Login} />
    <PrivateRoute path="/" exact component={Home} user={this.state.user} />
    <PrivateRoute path="/profile" exact component={Profile} user={this.state.user} />
    <Route render={() => <Redirect to="/" />} />
  </Switch>
</Router>

这样不管用户状态如何，只需要维护一套路由规则，逻辑更直观。

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