React Router受保护路由GuardedRoute的Redirect重定向不生效问题排查

问题根因 #

1. 当前代码中<Header>组件为全局平级结构，无论路由匹配结果、登录状态是什么，都会强制渲染，无法实现SignUp页面隐藏Header的需求
2. 受保护路由逻辑和使用方式错误：将GuardedRoute绑定到/signup路径下，现有逻辑为auth为true才渲染子组件，相当于只有已登录用户可以访问注册页，未登录用户会触发跳转到/signup的逻辑，和/signup路径的GuardedRoute判断形成无限重定向循环
3. 多段Switch分散配置，路由匹配优先级混乱

修复后代码 #

App.js #

return (
    <div className='App'>
      {/* 全局统一Switch控制路由优先级 */}
      <Switch>
        {/* 单独处理注册页路由，不渲染Header */}
        <Route path='/signup'>
          {userAccount ? <Redirect to='/' /> : <SignUp />}
        </Route>
        {/* 其余路由统一走登录校验，登录成功才渲染Header和页面内容 */}
        <GuardedRoute auth={userAccount}>
          <Header />
          <div className='contant-page'>
            <Switch>
              <Route exact path='/'>
                <Home />
              </Route>
              <Route exact path='/search'>
                <Search />
              </Route>
              <Route exact path='/cart'>
                <Cart />
              </Route>
              <Route component={PageNotFound} />
            </Switch>
          </div>
        </GuardedRoute>
      </Switch>
    </div>
  );

受保护路由（GuardedRoute） #

function GuardedRoute({ children, auth, ...rest }) {
  console.log('GuardedRoute ' + auth);
  return (
    <Route
      {...rest}
      render={() => {
        return auth ? children : <Redirect to='/signup' />;
      }}
    />
  );
}

核心修改说明 #

• 新增全局顶级Switch，优先匹配/signup路径，匹配成功后直接渲染SignUp组件，不会执行后续Header相关代码
• 修正登录状态判断逻辑：已登录用户访问/signup会直接重定向到首页，未登录用户可正常访问注册页
• 所有非注册页路由统一走GuardedRoute校验，未登录用户直接重定向到注册页，登录成功才会渲染Header和对应页面内容
• 消除了Header全局渲染的问题，只有登录后的业务页面才会显示导航栏

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