react router怎么清除历史记录

Posted 2023-05-08

react router清除历史记录,首先回到之前的页面,Component会重新render数据初始化。

也可以通过设置cookie或者用store来存储之前的信息，写个全局变量用来 store,getInitState 时会先从里面找，comentDidMount 时，再 调用 ajax 把服务端的数据更新。

在加载数据之后，用pushstate 改变当前的url，然后goback的时候根据最后一次的url来加载component需要的数据，不过react-router 里面的location需要自定义做相应的修改。

$ npm install -S react-router
import Router from 'react-router';
render(<Router/>, document.getElementById('app'));
import Router, Route, hashHistory from 'react-router';
render((
<Router history=hashHistory>
<Route path="/" component=App/>
</Router>
), document.getElementById('app'));

<Router history=hashHistory>
<Route path="/" component=App/>
<Route path="/repos" component=Repos/>
<Route path="/about" component=About/>
</Router>



React Router 安装命令如下。

使用时，路由器Router就是React的一个组件。

Router组件本身只是一个容器，真正的路由要通过Route组件定义。

上面代码中，用户访问根路由/（比如http://www.example.com/），组件APP就会加载到document.getElementById('app')。

你可能还注意到，Router组件有一个参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定，即URL的#部分发生变化。举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/。

Route组件定义了URL路径与组件的对应关系。你可以同时使用多个Route组件。

上面代码中，用户访问/repos（比如http://localhost:8080/#/repos）时，加载Repos组件；访问/about（http://localhost:8080/#/about）时，加载About组件。

参考技术A .为什么用webpack?他像Browserify,但是将你的应用打包为多个文件.如果你的单页面应用有多个页面,那么用户只从下载对应页面的代码.当他么访问到另一个页面,他们不需要重新下载通用的代码.他在很多地方能替代Grunt跟Gulp 参考技术B importReactfrom'react'importrenderfrom'react-dom'constAbout=React.createClass(/**/)constInbox=React.createClass(/**/)constHome=React.createClass(/**/)constApp=React.createClass(getInitialState()returnroute:window.location.hash.substr(1),componentDidMount()window.addEventListener('hashchange',()=>this.setState(route:window.location.hash.substr(1))),render()letChildswitch(this.state.route)case'/about':Child=About;break;case'/inbox':Child=Inbox;break;default:Child=Home;return(AppAboutInbox))render(,document.body) 参考技术C importReactfrom'react'importrenderfrom'react-dom'constAbout=React.createClass(/**/)constInbox=React.createClass(/**/)constHome=React.createClass(/**/)constApp=React.createClass(getInitialState()returnroute:window.location.hash.substr(1),componentDidMount()window.addEventListener('hashchange',()=>this.setState(route:window.location.hash.substr(1)

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

【中文标题】如何在 React Router v5 中推送到历史记录？

【英文标题】：How to push to History in React Router v5?

【发布时间】：2020-10-16 20:31:38

【问题描述】：

是否可以创建一个全局历史文件来管理 react-router-dom v5 上的 createBrowserHistory()？ 我知道 V5 使用 useHistory() 作为获取历史记录的一种方式。但是是否可以从任何地方检索历史记录，例如我不使用函数组件的情况？

在 V4 上，我可以创建一个文件 history.js：

import  createBrowserHistory  from 'history';
export default createBrowserHistory();

它适用于 V4 https://codesandbox.io/s/react-router-v4-nfwr0

它在 V5 上不起作用 - 它会更新 URL，但会重定向到未找到 https://codesandbox.io/s/react-router-v5-not-working-jlrep

【参考方案1】：

正如文档所说，您应该使用历史的 v4 来处理 react-router v5。

https://github.com/ReactTraining/history

版本 4 的文档可以在 v4 分支上找到。版本 4 用于 React Router 版本 4 和 5。

【讨论】：

哦！这适用于历史/位置，太糟糕了，没有关于如何让 React Router 真正注意到变化的内容。 :-(

【参考方案2】：

我通过这样做解决了这个问题。看看我做了什么

像以前一样创建文件

这是代码

import createBrowserHistory  from 'history';
import store from 'store';
export default createBrowserHistory(
    basename:  store ? store.getState().productionBaseUrl : ''
);

我导入 Redux 的原因是项目没有放在 nginx 根文件夹上。所以我应该添加一个基本名称。如果你不需要它，你可以删除它。

然后你可以在你自己的 coponnet 中使用它。如何使用？让我给你看一下代码。

// if my history in src/router/
import history from 'router/history';

history.push(`$your router address`)

注意

history 的 push 方法可以传递一个像 origin props 这样的对象。但是在子路由器中总是会刷新。所以在使用的时候传递一个字符串。