React Router语言 - 包含多个重定向组件的意外重定向行为

Question

我遇到了以下场景:

我有一个react router封装的react组件，用3个路由渲染:

1. 如果路由匹配"/about"，将用户重定向到"/about-new"
2. 如果路由匹配成功，则显示对应的组件。
3. 如果请求的路由不存在，将用户重定向到"/404"

参见实例

我发现，当我点击链接导航到"about"页面，路由从"/about-new"变为/404;当我点击指向不存在的路由的链接时，它会尝试导航到该路由，而不是"/404"

是预期的行为为React路由器?我定义组件的方式有问题吗?或者这是React Router的一个bug ?

Answer 1

您没有About组件的路由。https://codesandbox.io/s/react-router-v5-starter-forked-f715c?file=/src/index.js

Answer 2

在我寻找答案的过程中，我意识到<Redirect>的行为缺乏文档。我试了一下，以了解它是如何工作的。

<标题>

简短回答是，这是预期的行为。

<标题>

长回答当<Redirect from='...' to='...'>匹配时，React路由器将尝试在你的应用程序中找到一个匹配的<Route>。这可以是本地开关的匹配，也可以是微前端应用程序中的父开关的匹配。

从代码库，我的理解是，路由器总是试图找到一个组件来渲染;毕竟，React的本质是将JSX元素转换成JavaScript，然后输出纯HTML。

如果没有匹配的路由，重定向将被忽略并继续向下切换。这就是为什么在我的例子中<Redirect to='/404'>是匹配的。

你可以从这里的代码中看到，<Redirect>组件的工作是替换浏览器历史记录，因为它并没有真正呈现任何东西，路由器继续搜索一些要呈现的组件。

在没有<Redirect>只有路由的情况下，并且没有路由匹配，它将返回到将浏览器URL更改为重定向的to={...}参数中所述的内容，并显示空白页面。

因此，React Router在<Switch>中的行为是，路由只在<Route>匹配时停止，或者当没有<Route>匹配时显示空白页面时停止。