如何在React路由条件渲染时为SignUp组件配置对应URL路径

错误原因 #

你之前的两种写法都有逻辑缺陷：

1. 第一种直接根据userAccount条件返回SignUp组件，完全没有调用路由跳转能力，浏览器地址栏自然不会自动更新路径
2. 第二种把/signup的Route包在userAccount的条件分支中，当触发该分支时当前URL还是上一个页面的路径（比如/search），无法匹配到/signup的路由规则，所以只会渲染空白

正确实现逻辑 #

你需要把/signup路由放到全局路由匹配规则中，同时增加路由重定向逻辑，满足条件时自动跳转到专属路径，代码如下：

return (
  <div>
    <Switch>
      {/* 注册页专属路由 */}
      <Route exact path="/signup">
        {userAccount ? <SignUp /> : <Redirect to="/" />}
      </Route>
      {/* 普通页面路由逻辑 */}
      <Route path="/">
        {/* 满足注册条件时直接重定向到注册页，自动更新URL */}
        {userAccount ? (
          <Redirect to="/signup" />
        ) : (
          <>
            <Header />
            <div>
              <Switch>
                <Route exact path='/'>
                  <Home />
                </Route>
                <Route exact path='/search'>
                  <Search />
                </Route>
              </Switch>
            </div>
          </>
        )}
      </Route>
    </Switch>
  </div>
);

逻辑说明 #

• 全局路由优先匹配/signup路径，符合条件就渲染注册页，不符合自动跳回首页，避免非法访问
• 当userAccount判定为true时，不管用户当前访问任何普通路径，都会触发重定向逻辑，自动把URL修改为/signup，同时命中注册页路由渲染对应组件
• 所有路径变化都走官方路由逻辑，不会出现路径和渲染组件不匹配的问题

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