重定向從「/」的陣營，路由器

Question

我試圖建立從「/賬戶」，以「/帳號/簽到」

<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> 

但我認爲這不是最好的辦法，因爲我有一個問題，這是bug還是正常的行爲？

Answer 1

<Redirect>上的from默認情況下是鬆散的。正如您所擁有的，它將匹配以/ 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>