如何在 React Router v5 中更新 URL 并替换历史状态而不重新渲染整个应用程序？

关键词：

【中文标题】如何在 React Router v5 中更新 URL 并替换历史状态而不重新渲染整个应用程序？【英文标题】：How to update the URL and replace history state in React Router v5 without re-rendering the whole app? 【发布时间】：2021-01-13 09:34:16 【问题描述】：

在使用 React Router 及其浏览器历史记录时，有几种情况会触发重新渲染，我不想重新渲染整个应用程序：

使用 history.replace('currentPath', data: 'someState' ;

向 URL 添加参数，例如“?active=1”。

有没有办法做到这一点，或者解决方案是优化某些组件的性能？

【问题讨论】：

【参考方案1】：

你可以像这样使用history.replaceState()：

const setQueryParams = (param, value) => 
    const history = window.history;
    let currentUrlParams = new URLSearchParams(window.location.search);
    currentUrlParams.set(param, value);

    const url = `$window.location.pathname?$currentUrlParams.toString()`;
    history.replaceState(, '', url);
;

【讨论】：

如何在 React Router v5 中推送到历史记录？

】如何在ReactRouterv5中推送到历史记录？【英文标题】：HowtopushtoHistoryinReactRouterv5?【发布时间】：2020-10-1620:31:38【问题描述】：是否可以创建一个全局历史文件来管理react-router-domv5上的createBrowserHistory()？我知道V5使用useHistory()作... 查看详情

如何在 React Router v5 中推送到历史记录？

】如何在ReactRouterv5中推送到历史记录？【英文标题】：HowtopushtoHistoryinReactRouterv5?【发布时间】：2021-02-0506:20:23【问题描述】：是否可以创建一个全局历史文件来管理react-router-domv5上的createBrowserHistory()？我知道V5有useHistory()作为... 查看详情

如何使用 react-router-component 更新页面

】如何使用react-router-component更新页面【英文标题】：Howtoupdatepagewithreact-router-component【发布时间】：2017-03-1105:37:42【问题描述】：我正在使用react-router-component（不是react-router）来处理我的单页应用程序中的路由。刷新页面或在... 查看详情

在使用 React Router v5 和 Redux 时，无法弄清楚如何将 props 传递给组件

】在使用ReactRouterv5和Redux时，无法弄清楚如何将props传递给组件【英文标题】：Can\'tfigureouthowtopasspropstocomponentswhenusingReactRouterv5andRedux【发布时间】：2021-10-0110:47:42【问题描述】：使用react-router-dom我需要为多个url使用一个组件，... 查看详情

react开发中使用react-router-dom路由最新版本v5.1.2路由嵌套子路由

...然后再建两个子组件mobile和pcimportReactfrom"react";importBrowserRouterasRouter,Switch,Route,NavLinkfrom"react-router-dom";import 查看详情

react开发中使用react-router-dom路由最新版本v5.1.2基本跳转属性

react路由分为2个大的版本3.x及之前是个大的版本（react-router）、4.x之后又是一个大的版本（react-router-dom），下面我们来用5.1.2版本的基本使用方法首先在我们的react项目中安装路由npminstallreact-router-dom-S或者yarnaddreact-router-dom-S基... 查看详情

如何使用 React Router V5 默认滚动到顶部？

】如何使用ReactRouterV5默认滚动到顶部？【英文标题】：HowtoscrolltotopbydefaultusingReactRouterV5?【发布时间】：2021-08-1218:59:25【问题描述】：作为标题，每次我使用<Redirectto="...">从一页重定向到另一页时，我都想滚动... 查看详情

React Router v6 和 ow Params 不像 v5 那样工作

】ReactRouterv6和owParams不像v5那样工作【英文标题】：ReactRouterv6andownParamsdoesntworklikev5【发布时间】：2022-01-2021:39:51【问题描述】：您好，在reactrouterdomv5中，我可以在redux中获取参数。示例代码如下：1-传递参数<Routepath="/saveproduct... 查看详情

React Router：只更新一个查询参数而不是全部替换

】ReactRouter：只更新一个查询参数而不是全部替换【英文标题】：ReactRouter:Updateonlyonequeryparameterinsteadofreplacingall【发布时间】：2020-08-2409:34:57【问题描述】：我正在尝试使用react-router(v5)在按钮单击时仅更新一个查询参数键值。con... 查看详情

react-router-dom v5 的 useHistory 实例是啥？

】react-router-domv5的useHistory实例是啥？【英文标题】：WhatisuseHistoryinstanceofreact-router-domv5?react-router-domv5的useHistory实例是什么？【发布时间】：2020-03-0606:06:07【问题描述】：正如我们在react-router-dom的v5中所知道的，我们可以使用useH... 查看详情

react-router：如何在不导致导航/重新加载的情况下更新 url？

】react-router：如何在不导致导航/重新加载的情况下更新url？【英文标题】：react-router:HowdoIupdatetheurlwithoutcausinganavigation/reload?【发布时间】：2019-11-2719:42:26【问题描述】：使用react路由器，我已经完成了更新url：this.props.history.push... 查看详情

使用 react-router-dom v4 / v5 组合侧边栏和嵌套路由

】使用react-router-domv4/v5组合侧边栏和嵌套路由【英文标题】：CombinationofSidebarandNestedroutesusingreact-router-domv4/v5【发布时间】：2020-02-1218:37:42【问题描述】：我想在单个路由文件中实现嵌套路由和侧边栏路由的某种组合。我希望组... 查看详情

React-router v5.2 路由不工作，只显示主页

】React-routerv5.2路由不工作，只显示主页【英文标题】：React-routerv5.2routesaren\'tworking,onlyhomepageisdisplayed【发布时间】：2020-11-1820:29:01【问题描述】：我使用的是5.2版路由器，我正在尝试在文件app.js中创建路由。我的路线如下所示... 查看详情

在 Apollo 客户端中使用 react-router 返回时 React 未更新其状态

】在Apollo客户端中使用react-router返回时React未更新其状态【英文标题】：Reactnotupdatingitsstatewhencomebackusingreact-routerinApolloClient【发布时间】：2017-06-2312:46:24【问题描述】：我正在尝试实现一个场景，我需要添加一个新站点，然后返... 查看详情

React Router v6 中的前导可选路径参数

...le在v6中它不起作用。尝试在pathprop中使用数组，但不支持如何在v6中重构这些？【问题讨论】：【参考方案1】：查看这个Github问题：h 查看详情

如何在 react-router 中使用普通的锚链接

】如何在react-router中使用普通的锚链接【英文标题】：Howtousenormalanchorlinkswithreact-router【发布时间】：2015-05-0718:24:28【问题描述】：非常类似于thisangularquestion：使用react-router时如何使用锚链接进行页内导航？也就是说，我在使用... 查看详情

redux-react-route v4/v5 push() 在 thunk 动作中不起作用

】redux-react-routev4/v5push()在thunk动作中不起作用【英文标题】：redux-react-routev4/v5push()isnotworkinginsidethunkaction【发布时间】：2017-12-1416:52:05【问题描述】：在index.js中直接push或throwdispatch效果很好：...importpushfrom\'react-router-redux\'constbro 查看详情

react-router路由之routerrender方法（v5v6）

参考技术A安装路由安装react-router-dom的即已附带react-router核心包直接使用使用Route组件完成类似于vue的router-view+routes的布局通过类routes配置文件和相关封装函数完成便捷性路由布局总结： 查看详情