react-router v4 根路径根据登录状态重定向至不同组件问题求助

我来帮你搞定这个需求！要实现访问/时根据登录状态跳转到不同页面，你只需要修改根路径的路由配置，结合条件判断和<Redirect>组件就可以了，下面给你两种可行的方案：

方案一：直接在Route的render属性中处理逻辑 #

这种方式不用额外创建组件，直接在路由配置里写判断逻辑，比较简洁：

<Switch>
  {/* 根路径的条件重定向 */}
  <Route
    exact
    path="/"
    render={() => {
      // 替换成你实际的登录状态判断逻辑
      // 比如从localStorage、redux或者组件状态中获取
      const isAuthenticated = localStorage.getItem('authToken') ? true : false;
      
      return isAuthenticated ? (
        <Redirect to="/dashboard" />
      ) : (
        <Redirect to="/signup" />
      );
    }}
  />
  {/* 保留你的私有路由 */}
  <PrivateRoute path="/dashboard" component={Dashboard} />
  {/* 别忘了添加Signup和Login的路由（原来的配置里没看到） */}
  <Route path="/signup" component={Signup} />
  <Route path="/login" component={Login} />
  {/* 404重定向 */}
  <Redirect from="*" to="/404" />
</Switch>

方案二：抽离成自定义组件（更易维护） #

如果判断逻辑比较复杂，或者需要复用，建议把根路径的重定向逻辑抽成单独的组件：

// 自定义根重定向组件
const RootRedirect = () => {
  // 这里同样替换成你的登录状态判断逻辑
  const isAuthenticated = localStorage.getItem('authToken') ? true : false;
  
  return isAuthenticated ? (
    <Redirect to="/dashboard" />
  ) : (
    <Redirect to="/signup" />
  );
};

// 路由配置
<Switch>
  <Route exact path="/" component={RootRedirect} />
  <PrivateRoute path="/dashboard" component={Dashboard} />
  <Route path="/signup" component={Signup} />
  <Route path="/login" component={Login} />
  <Redirect from="*" to="/404" />
</Switch>

补充说明 #

1. 登录状态的获取：上面的例子用了localStorage来判断，如果你是用Redux或者Context管理登录状态，只需要把isAuthenticated换成对应的状态即可。比如用Redux的话：

import { useSelector } from 'react-redux';

const RootRedirect = () => {
  const isAuthenticated = useSelector(state => state.user.isLoggedIn);
  return isAuthenticated ? <Redirect to="/dashboard" /> : <Redirect to="/signup" />;
};

2. PrivateRoute的正确性：确保你的PrivateRoute组件逻辑是正确的，它应该在用户未登录时重定向到登录页，比如：

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = localStorage.getItem('authToken') ? true : false;
  
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

这样整个流程就通顺了：访问/时，已登录用户直接进入Dashboard，未登录用户跳转到Signup；如果未登录用户直接访问Dashboard，会被PrivateRoute重定向到Login页面。

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