react-router 中的history
eact-router 是建立在history之上的
history 一个管理js应用session会话历史的js库。它将不同环境(浏览器,node...)的变量统一成了一个简易的API来管理历史堆栈、导航、确认跳转、以及sessions间的持续状态。
-
//基本 使用
-
import { createHistory }
from
'history'
-
-
const history = createHistory()
-
-
// 当前的地址
-
const location = history.getCurrentLocation()
-
-
// 监听当前的地址变换
-
const unlisten = history.listen(
location => {
-
console.log(location.pathname)
-
})
-
-
// 将新入口放入历史堆栈
-
history.push({
-
pathname:
'/the/path',
-
search:
'?a=query',
-
-
// 一些不存在url参数上面的当前url的状态值
-
state: {
the:
'state' }
-
})
-
-
// When you're finished, stop the listener
-
unlisten()
你也可以使用 history对象来的方法来改变当前的location:
- push(location)
- replace(location)
- go(n)
- goBack()
- goForward()
一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。
location对象包括:
常用的三种history
pathname 同window.location.pathname search 同window.location.search state 一个捆绑在这个地址上的object对象 action PUSH, REPLACE, 或者 POP中的一个 key 唯一ID
-
// HTML5 history, 推荐
-
import
createHistory
from
'history/lib/createBrowserHistory'
-
-
// Hash history
-
import
createHistory
from
'history/lib/createHashHistory'
-
-
// 内存 history (如:node环境)
-
import
createHistory
from
'history/lib/createMemoryHistory'
createHashHistory
这是一个你会获取到的默认 history ,如果你不指定某个 history (即 <Router>{/* your routes */}</Router>)。它用到的是 URL 中的 hash(#)部分去创建形如 http://example.com/#/some/path 的路由。
Hash history 是默认的,因为它可以在服务器中不作任何配置就可以运行,并且它在全部常用的浏览器包括 IE8+ 都可以用。但是我们不推荐在实际生产中用到它,因为每一个 web 应用都应该有目的地去使用createBrowserHistory。
createBrowserHistory
Browser history 是由 React Router 创建浏览器应用推荐的 history。它使用 History API 在浏览器中被创建用于处理 URL,新建一个像这样真实的`URL example.com/some/path`
createMemoryHistory
Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境(像 React Native )。
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#csdnc-thumbsup"></use> </svg><span class="name">点赞</span> <span class="count">1</span> </a></li> <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-Collection-G"></use> </svg><span class="name">收藏</span></a></li> <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-fenxiang"></use> </svg>分享</a></li> <!--打赏开始--> <!--打赏结束--> <li class="tool-item tool-more"> <a> <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg> </a> <ul class="more-box"> <li class="item"><a class="article-report">文章举报</a></li> </ul> </li> </ul> </div> </div> <div class="person-messagebox"> <div class="left-message"><a href="https://blog.csdn.net/jimolangyaleng"> <img src="https://profile.csdnimg.cn/5/C/7/3_jimolangyaleng" class="avatar_pic" username="jimolangyaleng"> <img src="https://g.csdnimg.cn/static/user-reg-year/1x/8.png" class="user-years"> </a></div> <div class="middle-message"> <div class="title"><span class="tit"><a href="https://blog.csdn.net/jimolangyaleng" data-report-click="{"mod":"popu_379"}" target="_blank">狼牙冷</a></span> </div> <div class="text"><span>发布了46 篇原创文章</span> · <span>获赞 28</span> · <span>访问量 25万+</span></div> </div> <div class="right-message"> <a href="https://im.csdn.net/im/main.html?userName=jimolangyaleng" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信 </a> <a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a> </div> </div> </div>