不匹配时反应路由器 v4 重定向

Question

我是 react-router（以及一般的客户端路由）的新手，所以我可能认为这一切都错了。如果是这种情况，请提前道歉......

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

• 如果没有用户，重定向到'/login'
• 否则，如果路由不存在，则重定向到“/”（根目录）
• 否则让用户转到请求的路线

我在this.state.user 中跟踪用户。我当前的路由器似乎遵循前 2 条规则，但只让经过身份验证的用户看到主页（'/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 中已修复）

Answer 2

答案很简单

<Switch>
  <Route path="/login" exact component={Login}/>
  {!this.state.user && <Redirect to='/login' />}
  <Route path="/" exact component={Home}/>
  <Route path="/profile" exact component={Profile}/>
  <Redirect to="/" />
</Switch>

交换机和路由器的主要区别在于路由器会尝试执行所有匹配的路径并将内容附加在一起，交换机将在第一次匹配时停止。

我的应用程序有类似的方法，但我将受保护的路由包装在一个单独的文件中，然后将用户配置文件包装为 HOC

export const App = () => (
  <Switch>
    <Route exact path='/login' component={Login} />
    {!hasToken() && <Redirect to='/login' />}
    <Route path='/' component={ProtectedRoute} />
  </Switch>
)

protectedRoute.js

const ProtectedRoute = ({ userInfo }: Props) => (
  <Layout userInfo={userInfo}>
    <Switch>
      <Route exact path='/a' component={A} />
      <Route exact path='/b' component={B} />
      <Route path='/c' component={C} />
      <Redirect to='/a' />
    </Switch>
  </Layout>
)

export default withUserInfo(ProtectedRoute)

Answer 3

您是否考虑过使用Route 包装器在Route 需要用户时检查用户？

const CanHasRouteAccess = ({ component: Component, iHasUser, ...rest }) => {
  return iHasUser ? (
    <Route {...rest} render={props => <Component {...props} />} />
  ) : (
    <Redirect to="/" />
  );
};

当没有用户时，您可以将 props 传递给 Route 或重定向到主页。

<CanHasRouteAccess
  path="/personal-data"
  exact
  component={Profile}
  iHasUser={Boolean(user)}
  />