react-router - 在 React-Router 中从 '/' 重定向

Question

我尝试设置从“/account”重定向到“/account/signIn”

  <Layout>
    <Switch>
      <Redirect from="/account" to="/account/signIn" />
      <Route path="/account/signIn" component={() => <div>signIn</div>} />
      <Route path="/account/signUp" component={() => <div>signUp</div>} />
    </Switch>
  </Layout>

当我去 http://localhost:3000/account/signUp我重定向到 http://localhost:3000/account/signIn .这个问题是这样解决的:

  <Layout>
    <Route exact path="/account" render={() => <Redirect to="/account/signIn" />} />
    <Route path="/account/signIn" component={() => <div>signIn</div>} />
    <Route path="/account/signUp" component={() => <div>signUp</div>} />
  </Layout>

但我认为这不是最好的方法，因为我有一个问题，这是错误还是正常行为？

Answer 1

from在 <Redirect>默认松散匹配。正如您所拥有的，它将匹配任何以/account 开头的内容，其中包括您的/account/signIn 和/account/signUp 路径。

在Switch内部，其实是直接读取子组件的props，不区分组件类型。所以，you can use exact and strict 就像在路线上一样。

因此，这应该适合您:

<Layout>
  <Switch>
    <Redirect exact from="/account" to="/account/signIn" />
    <Route path="/account/signIn" component={() => <div>signIn</div>} />
    <Route path="/account/signUp" component={() => <div>signUp</div>} />
  </Switch>
</Layout>