reactjs - 不匹配时响应路由器 v4 重定向

Question

我是 react 路由器(以及一般的客户端路由)的新手，所以我可能认为这一切都是错误的。如果是这种情况，请提前抱歉...

基本上只是想实现 3 个简单的规则:

• 如果没有用户，则重定向到“/login”
• 如果路由不存在，则重定向到“/”(根目录)
• 否则让用户前往请求的路线

我在 this.state.user 中跟踪用户。我当前的路由器似乎遵循前两条规则，但只让经过身份验证的用户看到主页(“/profile”重定向到“/”)，所以我知道我做错了什么，但不知道是什么。

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

如有任何建议，我们将不胜感激。谢谢

Answer 1

对于到达此处并寻求在没有路线匹配的情况下如何重定向的任何人:

<Switch>
  // ... your routes
  <Route render={() => <Redirect to="/" />} />
</Switch>

<小时/>

请注意，路由必须是 <Switch> 的直接子级，例如这不起作用:

<Switch>
  <Fragment>
    // ... your routes
    <Route render={() => <Redirect to="/" />} />
  </Fragment>
</Switch>

(可能在更新版本的react-router中修复)