如果 react-router-dom 与任何路由都不匹配，则重新加载页面

Question

我们正在处理一个用dotnet编写的项目，该项目带有Razor视图(纯后端堆栈(。我们计划使用react-router-dom将每个视图移动到React，以处理客户端和服务器中的路由。

我们的想法是逐页移动，以免大爆炸，因为项目已经在生产中。

当我设置时react-router-dom看起来每个页面都在客户端上处理，如果路由不在Router处理的路由内，则不会重新加载整页。

客户端路由器

import { Router } from 'react-router-dom'
import { createBrowserHistory, History } from 'history'
const history: History = createBrowserHistory({ basename: baseUrl })
<Router history={history}>
...(routes and page layout)
</Router>

服务器路由器

<StaticRouter
basename={basename}
context={routerContext}
location={params.location.path}
>
...(routes and page layout)
</StaticRouter>

有没有办法让路由器以这种方式工作：

• 如果路由在react-router-dom处理的路由内，则执行客户端转换
• 如果路由器不在react-router-dom处理的路由器内(这意味着它仍由 dotnet 后端处理(，请重新加载整个页面。

如果您需要更多信息，请告诉我。 提前谢谢你。

Answer 1

您需要在Router末尾为 * route 添加一个NoMatch组件

<Route component={NoMatch} />

并定义您的NoMatch组件，如下所示

function NoMatch() {
window.location.reload();
return null;
}

此外，您的路由应该在<Switch>内，否则NoMatch将像您的路由一样执行，这将导致无限循环。 有关更多详细信息，请参阅文档：https://reacttraining.com/react-router/web/api/Switch

Answer 2

幸运的是，我们有history道具来提供帮助，它提供了一个action参数，可以指示用户是从另一条路线导航还是直接在当前路线上开始。

这就是我解决重新加载循环问题的方式：

/**
* Handles Legacy/SSR pages, reloads the page when the location changes
*
* @param {object} props Props
* @param {object} props.location Location object
* @param {object} props.history  History object
*/
const LegacyRoute = ( { location, history } ) => {
useEffect( () => {
// Reload the page if the location change ( and not on first load )
if ( history.action === 'PUSH' ) {
window.location.reload();
}
return () => {
// Reload the page if we navigate away to another route
window.location.reload();
}
}, [ location.pathname ] );
return null;
}

然后，将路由定义为：

<Route component={ LegacyRoute } />