React routerV4 笔记

React routerV4 笔记

 

 

一、基础路由示例

import React from 'react'

import {

BrowserRouter as Router,

Route,

Link

} from 'react-router-dom'

//1、写路由链接可以使用Link或者NavLink

const BasicExample = () => (

<Router>

<div>

<ul>

<li><Link to="/">首页</Link></li>

<li><Link to="/about">关于</Link></li>

<li><Link to="/topics">主题列表</Link></li>

</ul>

 

<hr/>

//2、配置路由路径

<Route exact path="/" component={Home}/>

<Route path="/about" component={About}/>

<Route path="/topics" component={Topics}/>

</div>

</Router>

)

//3、书写组件模块

const Home = () => (

<div>

<h2>首页</h2>

</div>

)

 

const About = () => (

<div>

<h2>关于</h2>

</div>

)

//特殊的组件，使用match参数传参，传递当前的url的值。还有个路由嵌套。

 

const Topics = ({ match }) => (

<div>

<h2>主题列表</h2>

<ul>

<li>

<Link to={`${match.url}/rendering`}>

使用 React 渲染

</Link>

</li>

<li>

<Link to={`${match.url}/components`}>

组件

</Link>

</li>

<li>

<Link to={`${match.url}/props-v-state`}>

属性 v. 状态

</Link>

</li>

</ul>

 

<Route path={`${match.url}/:topicId`} component={Topic}/>

<Route exact path={match.url} render={() => (

<h3>请选择一个主题。</h3>

)}/>

</div>

)

 

const Topic = ({ match }) => (

<div>

<h3>{match.params.topicId}</h3>

</div>

)

 

export default BasicExample

---

二、路由API总结

背景知识window.history新的Api

HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点，下面逐一简要说明一下。

1、存储当前历史记录点

存储的方式类似于数组的入栈（Array.push()），在window.history里新增一个历史记录点，例如：

// 当前的url为：http://www.qingdou.me/index.html

var json={time:new Date().getTime()};

// @状态对象：记录历史记录点的额外对象，可以为空

// @页面标题：目前所有浏览器都不支持

// @可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域

window.history.pushState(json,”",”http://www.qingdou.me/post-1.html”);

 

var state = { title: title, url: options.url, otherkey: othervalue }; window.history.pushState(state, document.title, url);

 

history.pushState方法接受三个参数，依次为：

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。

title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

执行了pushState方法后，页面的url地址为http://www.qingdou.me/post-1.html。

2、替换当前历史记录点

window.history.replaceState和window.history.pushState类似，不同之处在于replaceState不会在window.history里新增历史记录点，其效果类似于window.location.replace(url)，都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作，而要更新当前历史记录条目的状态对象或URL时，使用replaceState()方法会特别合适。

3、监听历史记录点

监听历史记录点，直观的可认为是监听URL的变化，但会忽略URL的hash部分，监听URL的hash部分，HTML5有新的API为onhashchange，我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化，并且可以获取存储在该历史记录点的状态对象，也就是上文说到的json对象，如：

// 当前的url为：http://www.qingdou.me/post-1.html

window.onpopstate=function()

{

// 获得存储在该历史记录点的json对象

var json=window.history.state;

// 点击一次回退到：http://www.qingdou.me/index.html

// 获得的json为null

// 再点击一次前进到：http://www.qingdou.me/post-1.html

// 获得json为{time:1369647895656}

}

值得注意的是：javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。

还有一点注意的是，谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的，谷歌浏览器奇怪的是回触发onpopstate事件，而火狐浏览器则不会。

浏览器兼容性表：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
replaceState, pushState	5	4.0 (2.0)	10	11.50	5.0
history.state	18	4.0 (2.0)	10	11.50	6.0

基于ajax与html无刷新换url的jquery插件pjax。

---

 

Router的API

1、<BrowserRouter>

使用 HTML5 历史 API 记录（ pushState，replaceState 和 popstate 事件）的 <Router> 使你的UI与URL保持同步。

属性：

basename: string

所有地址的基本网址。如果您的应用程序是从服务器上的子目录提供的，则需要将其设置为子目录。格式正确的基本名应该有一个前导斜线，但是结尾不能有斜线。

<BrowserRouter basename="/calendar"/> <Link to="/today"/> // renders <a href="/calendar/today">

forceRefresh: bool

如果为 true，则路由器将在页面导航中使用整页刷新。

getUserConfirmation: func

当导航需要确认时执行的函数。默认使用 window.confirm

// 使用默认的确认函数 const getConfirmation = (message, callback) => { const allowTransition = window.confirm(message) callback(allowTransition) } <BrowserRouter getUserConfirmation={getConfirmation}/>

forceRefresh: bool

当设置为 true 时，在导航的过程中整个页面将会刷新。 只有当浏览器不支持 HTML5 的 history API 时，才设置为 true

const supportsHistory = 'pushState' in window.history <BrowserRouter forceRefresh={!supportsHistory}/>

---

2、<HashRouter>

HashRouter 是一种特定的 <Router>， HashRouter 使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步。

注意： 使用 hash 的方式记录导航历史不支持 location.key 和 location.state。 在以前的版本中，我们为这种行为提供了 shim，但是仍有一些问题我们无法解决。 任何依赖此行为的代码或插件都将无法正常使用。 由于该技术仅用于支持传统的浏览器，因此在用于浏览器时可以使用 <BrowserHistory> 代替。

hashRouter和browserRouter属性类似。唯一不同的多一个

hashType: string

window.location.hash 使用的 hash 类型。有如下几种：

• "slash" - 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops
• "noslash" - 后面没有斜杠，例如 # 和 #sunshine/lollipops
• "hashbang" - Google 风格的 “ajax crawlable”，例如 #!/ 和 #!/sunshine/lollipops

默认为 "slash"。

---

3、Link

属性：

1、to后可以为string或者object均可

2、replace: bool

当设置为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。

当设置为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。

默认为 false。

---

4、NavLink

当它与当前 URL 匹配时，为其渲染元素添加样式属性。

NavLink和Link类似，只是多几个属性。关键是可以使用activeClassName(string)属性和activeStyle(object)属性

exact: bool

如果为 true，则仅在位置完全匹配时才应用 active 的类/样式。

strict: bool

当情况为 true，要考虑位置是否匹配当前的URL时，pathname 尾部的斜线要考虑在内。有关更多信息，请参见 <Route strict> 文档。

 

isActive: func

一个为了确定链接是否处于活动状态而添加额外逻辑的函数，如果你想做的不仅仅是验证链接的路径名与当前 URL 的 pathname 是否匹配，那么应该使用它

---

5、<Prompt/>

用于在用户离开页面之前及时提示用户。当你的应用程序进入应阻止用户离开的状态时（比如一个表格被填满了一半），渲染一个 <Prompt> 。

它有两个属性：1、message:string 用户试图离开时的提示信息。 message:function 将用户试图前往到的下一个 Location 和 action 调用。返回一个字符串以向用户显示提示符，或返回 true 以允许转换。

<Prompt message={location => ( location.pathname.startsWith('/app') ? true : `Are you sure you want to go to ${location.pathname}?` )}/>

2、when 你可以一直渲染而不是在警示框出现之后才渲染一个 <Prompt> ，但是可以通过 when={true} 或 when={false} 来阻止或允许相应的导航。

---

6、<Redirect>

使用Redirect组件将导航到一个新的地址。这个新地址会覆盖history栈中的当前地址。

属性：to: string、to: object to属性即重定向到的url。

push: bool 当true时，重定向会将新地址推入history中，而不是替换当前地址。

from: string 设置从哪个路径重定向到to的路径。

exact: bool 完全匹配from

strict: bool 严格匹配from

---

7、<Route>

Route 组件也许是 React Router 中最重要的组件，它可以让你理解并学习如何使用它。它最基本的职责是在 location 与 Route 的 path 匹配时呈现一些 UI。

Route render methods

<Route>有三种渲染方法：

<Route component> 只有当位置匹配时才会渲染的React组件。

<Route render> func 方便内联渲染和包裹。

<Route children> func 不论路径是否匹配，均会渲染此函数。

属性：

path: string 路径

exact: bool 如果为true只有在路径完全匹配时才渲染

strict: bool

eg: 如果为 true 当真实的路径具有一个斜线将只匹配一个斜线location.pathname，如果有更多的URL段 location.pathname ，将不起作用

<Route strict path="/one/" component={About}/>

path	location.pathname	matches?
/one/	/one	no
/one/	/one/	yes
/one/	/one/two	yes

**警告：**可以使用 strict 来强制执行 location.pathname 没有结尾斜杠，但为了执行此操作，strict 和 exact 必须都是 true 。

<Route exact strict path="/one" component={About}/>

path	location.pathname	matches?
/one	/one	yes
/one	/one/	no
/one	/one/two	no

sensitive: bool

如果路径区分大小写，则为 true ，则匹配。

<Route sensitive path="/one" component={About}/>

path	location.pathname	sensitive	matches?
/one	/one	true	yes
/One	/one	true	no
/One	/one	false	yes

所有三种渲染方法都将通过相同的三个 Route 属性。

match

1、一个 match 对象中包涵了有关如何匹配 URL 的信息。match 对象中包涵以下属性：

params - (object) key／value 与动态路径的 URL 对应解析

isExact - (boolean) true 如果匹配整个 URL （没有结尾字符）

path - (string) 用于匹配的路径模式。被嵌套在 <Route> 中使用

url - (string) 用于匹配部分的 URL 。被嵌套在 <Link> 中使用

你将会在这些地方用到 match 对象：

• Route component 例如 this.props.match
• Route render 例如 ({ match }) => ()
• Route children 例如 ({ match }) => ()
• withRouter 例如 this.props.match
• matchPath 例如 返回值

如果 Route 没有 path，那么将会一直与他最近的父级匹配。这也同样适用于withRouter。

null matches

当前路由的 path 与当前地址不匹配时，使用 children 属性的 <Route> 将调用 children 方法。这种情况下， match 将为 null 。当<Route> 中的内容能够被渲染出来时，说明匹配成功，但这种情况是有挑战性的。

“解析”URL的默认方式是将 match.url 字符串连接到“相对”路径。

`${match.url}/relative-path`

如果你的匹配为 null 时尝试执行此操作，则会出现TypeError。它的意思是在使用子级属性时在 <Route> 内部加入“相对”路径是不安全的。

当您在生成null匹配对象的 <Route> 内部使用无路径的 <Route> 时。会出现类似但更微妙的情况。

// location.pathname = '/matches' <Route path='/does-not-match' children={({ match }) => ( // match === null <Route render={({ match:pathlessMatch }) => ( // pathlessMatch === ??? )}/> )}/>

无路径的 <Route> 从它们的父节点继承它们的match对象。 如果他们的父match是null，那么他们的匹配也是null。

这意味着：a）任何子路由/链接必须是绝对的，因为没有父级去解决，

并且b）父级路径match可以是null的无路径路由将需要使用子级属性进行渲染

location

location 代表应用程序现在在哪，你想让它去哪，或者甚至它曾经在哪。

router 将在这几个地方为您提供一个 location 对象：

• Route component as this.props.location
• Route render as ({ location }) => ()
• Route children as ({ location }) => ()
• withRouter as this.props.location

它也可以在 history.location 找到，但是你不应该使用它，因为它是可变的，你可以在 history 文档中阅读更多内容。

location 对象永远不会发生变化，因此你可以在生命周期钩子中使用它来确定何时导航，这对数据抓取和动画非常有用。

history

“history” 以及 “history对象”指的是 history 包中的内容，该包是 React Router 仅有的两大主要依赖之一（除去 React 本身），在不同的 Javascript 环境中，它提供多种不同的形式来实现对 session 历史的管理。

我们也会使用以下术语：

• “browser history” - 在特定 DOM 上的实现，使用于支持 HTML5 history API 的 web 浏览器中
• “hash history” - 在特定 DOM 上的实现，使用于旧版本的 web 浏览器中
• “memory history” - 在内存中的 history 实现，使用于测试或者非 DOM 环境中，例如 React Native

history 对象通常会具有以下属性和方法：

• length - (number 类型) history 堆栈的条目数
• action - (string 类型) 当前的操作(PUSH, REPLACE, POP)
• location - (object 类型) 当前的位置。location 会具有以下属性：

• pathname - (string 类型) URL 路径
• search - (string 类型) URL 中的查询字符串
• hash - (string 类型) URL 的哈希片段
• state - (object 类型) 提供给例如使用 push(path, state) 操作将 location 放入堆栈时的特定 location 状态。只在浏览器和内存历史中可用。

• push(path, [state]) - (function 类型) 在 history 堆栈添加一个新条目
• replace(path, [state]) - (function 类型) 替换在 history 堆栈中的当前条目
• go(n) - (function 类型) 将 history 堆栈中的指针调整 n
• goBack() - (function 类型) 等同于 go(-1)
• goForward() - (function 类型) 等同于 go(1)
• block(prompt) - (function 类型) 阻止跳转。(详见 history 文档)。

history 是可变的

history 对象是可变的，因此我们建议从 <Route> 的渲染选项中来访问 location，而不是从 history.location 直接获取。

---

8、Switch

渲染与该地址匹配的第一个子节点<Route>或者<Redirect>

<Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch>

如果为 <Switch> 提供了 location 属性，它将覆盖匹配子元素上的 location属性。

---

9、withRouter

您可以通过 withRouter 高阶组件访问 history 对象的属性和最近的 <Route>的 match 。 当路由渲染时， withRouter 会将已经更新的 match ， location和 history 属性传递给被包裹的组件。

const AuthButton = withRouter(({ history }) => (

fakeAuth.isAuthenticated ? (

<p>

Welcome! <button onClick={() => {

fakeAuth.signout(() => history.push('/'))

}}>Sign out</button>

</p>

) : (

<p>You are not logged in.</p>

)

))

---

10、<Router>

Router 是所有路由组件共用的底层接口。通常，我们的应用程序将使用其中一个高级路由器代替：

• <BrowserRouter>
• <HashRouter>
• <MemoryRouter>
• <NativeRouter>
• <StaticRouter>