react-router-dom(^5.3.0) -> 重定向

Question

使用Chrome访问ULR: '/home/page1'。(访问'/home'可转到'/home/page1')

不能渲染<Page1>

<Switch>
<Redirect from="/home" to="/home/page1" />
<Route path="/home/page1">
<Page1 />
</Route>
</Switch>

下面两个方法可以渲染Page1。我想知道为什么!

• 我把它放到
后面

<Switch>
<Route path="/home/page1">
<Page1 />
</Route>
<Redirect from="/home" to="/home/page1" />
</Switch>

• 2添加到' exact '道具

<Switch>
<Redirect exact from="/home" to="/home/page1" />
<Route path="/home/page1">
<Page1 />
</Route>
</Switch>

Answer 1

Switch内组件路径的顺序和特异性很重要!您应该对路径进行排序，从更具体到更不具体。这使Switch有机会首先匹配更具体的路径，然后返回到不太具体的路径。

为什么不工作

"/home"是"/home/page1"的路径前缀，并且两者都匹配。下面的代码创建了一个循环，其中重定向到的路径也与重定向的路径匹配。换句话说，您基本上是从"/home/page1"重定向到"/home/page1"，因为"/home/page1"仍然与"/home"匹配。

<Switch>
<Redirect from="/home" to="/home/page1" />
<Route path="/home/page1">
<Page1 />
</Route>
</Switch>

第1版"/home/page1"比"/home"更具体，允许在重定向之前匹配和呈现它。"/home"与"/home/page1"不匹配，因此跳过第一条路由。之后重定向为匹配并呈现。

<Switch>
<Route path="/home/page1">
<Page1 />
</Route>
<Redirect from="/home" to="/home/page1" />
</Switch>

版本2工作，因为不太具体的"/home"路径必须完全匹配，以便被匹配和呈现。"/home/page1"不完全匹配，因此跳过重定向。之后path="/home/page1"的路由为匹配并呈现。

<Switch>
<Redirect exact from="/home" to="/home/page1" />
<Route path="/home/page1">
<Page1 />
</Route>
</Switch>