[英]Page reload if react-router-dom doesn't match any route
We are working in a project which is written in dotnet with Razor views (Pure Backend stack).我们正在使用带有 Razor 视图(纯后端堆栈)的 dotnet 编写一个项目。 Our plan to move every view to
React
using react-router-dom
to handle routing in the client and server.我们计划使用
react-router-dom
将每个视图移动到React
来处理客户端和服务器中的路由。
What we have in mind is to move page by page not to do a big bang because the project is already in production.我们的想法是一页一页地移动,不要因为项目已经在生产中而大吵大闹。
When I setup react-router-dom
looks like every page is handled on the client and there is no full page reload if the route is not within the routes that Router
handles.当我设置
react-router-dom
看起来每个页面都在客户端上处理,如果路由不在Router
处理的路由内,则不会重新加载整页。
Client 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>
Server Router服务器路由器
<StaticRouter
basename={basename}
context={routerContext}
location={params.location.path}
>
...(routes and page layout)
</StaticRouter>
Is there any way to make the router work in this way:有没有办法让路由器以这种方式工作:
react-router-dom
, then do client side transitionreact-router-dom
处理的路由内,则进行客户端转换react-router-dom
(which means it's still handled by dotnet backend), make a full page reload.react-router-dom
处理的范围内(这意味着它仍然由 dotnet 后端处理),请重新加载整个页面。 Let me know if you need more information.如果您需要更多信息,请与我们联系。 Thank you in advance.
先感谢您。
You need to add a NoMatch
component for * route at the end of your Router
您需要在
Router
的末尾为 * 路由添加一个NoMatch
组件
<Route component={NoMatch} />
and define your NoMatch
component like below并定义您的
NoMatch
组件,如下所示
function NoMatch() {
window.location.reload();
return null;
}
Also, your routes should be within a <Switch>
because otherwise NoMatch
will execute as well as your route and this will cause and endless loop.此外,您的路线应该在
<Switch>
,否则NoMatch
将与您的路线一样执行,这将导致无限循环。 See documentation for more details: https://reacttraining.com/react-router/web/api/Switch有关更多详细信息,请参阅文档: https : //reacttraining.com/react-router/web/api/Switch
Luckily we have history
prop to help, which provides an action
param that can indicate whether the user navigated from another route or started on the current route directly.幸运的是,我们有
history
道具可以提供帮助,它提供了一个action
参数,可以指示用户是从另一条路线导航还是直接从当前路线开始。
So this is how I solved the reload-loop issue:所以这就是我解决重新加载循环问题的方法:
/**
* 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;
}
Then you define the route as:然后将路由定义为:
<Route component={ LegacyRoute } />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.