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内部，它实际上是直接阅读其子女的道具，并没有区分组件的类型。所以，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>

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

1 个答案: