脚本宝典收集整理的这篇文章主要介绍了

React 教程第十篇 —— 路由(3.0)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">路由</h1> <p>通过 URL 映射到对应的功能实现,<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> 的路由使用要先引入 react-router.js。 <br />注意: <br />react-router 4.0 以上的版本和 3.0 及以下的版本有很大的差别,本教程使用的是 3.0.2 的版本,后续会更新 4.0 以上版本的教程。 <br />在使用 npm 安装时默认是安装最新版本,如果安装的版本是最新的,而使用上用的是 3.0 版本的用法,则会报错。 <br />所以在 npm 安装时要指定版本 <code>npm <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>st<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a> react-router@3.0.2 --save-dev</code>。</p> <h1 id="articleHeader1">路由背景-SPA</h1> <p>传统的前端基本都是通过页面之间跳转来实现各功能模块的切换,这种做法会导致一个项目下来存在大量的 html 页面,而且每个页面都有一大堆的静态资源文件需要引入,在性能一直被垢病。后来有了随着 ajax 的普及,还有 <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 对 ajax 的封装后的便捷使用,开发者会大量的使用 ajax 来加载一个 html 页面到当前页面的某个容器当中来实现无刷新加载,但依然没有解决大量存在 html 页面和每个页面加载大量的静态资源文件而导致性能上的问题。随着移动互联网的普及,移动端对页面加载的性能要求和流量的限制越来越高,所以主流的前端框架都往 SPA 方向靠齐。<br />SPA,S<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>gle Page Application 的缩写,单页面应用,其目的是整个应用程序只有一个 html 页面,结合构建 webpack 的统一打包思想,把所有静态资源文件打包成一个 js 文件,在唯一的一个 html 页面引用,从而真正意义上实现一个 html 文件,一个 js 文件完成一个应用的构想。<br />SPA 优化了静态加载的性能,但一个应用程序还是有很多的功能模块,功能模块之间的切换,就变成了组件之间的切换,所以到目前为止基本上主流的前端框架都会有路由和组件两个概念,而且实现思想都是一致的。</p> <h1 id="articleHeader2">路由引用与使用</h1> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="//<a href="http://www.js-code.com/tag/es5" title="es5" target="_blank">es5</a><br /> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> {Router, Route, hashHistory, L<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>k, IndexRoute, browserHistory} = require(&quot;react-router&quot;);</p> <p>//<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a><br /> <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> {Router, Route, hashHistory, Link, IndexRoute, browserHistory} from 'react-router';</p> <p>//<a href="http://www.js-code.com/tag/es5" title="es5" target="_blank">es5</a> 和 <a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a> 的使用都是一样的<br /> <Link to=&quot;/&quot;>Root</Link><br /> <Router><br /> <Route path='/' component={RootComponent}></Route><br /> </Router></p> <p>//使用 `<script>` 标签 <script src=&quot;../js/ReactRouter.js&quot;></script><br /> <ReactRouter.Link to=&quot;/&quot;>Root</ReactRouter.Link><br /> <ReactRouter.Router><br /> <ReactRouter.Route path='/' component={RootComponent}></ReactRouter.Route><br /> </ReactRouter.Router>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">//<a href="http://www.js-code.com/tag/es5" title="浏览关于“es5”的文章" target="_blank" class="tag_link">es5</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> {Router, Route, hashHistory, Link, IndexRoute, browserHistory} = <span class="hljs-built_in">require</span>(<span class="hljs-string">"react-router"</span>); <span class="hljs-comment">//<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a></span> <span class="hljs-keyword">import</span> {Router, Route, hashHistory, Link, IndexRoute, browserHistory} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router'</span>; <span class="hljs-comment">//es5 和 es6 的使用都是一样的</span> &lt;Link to=<span class="hljs-string">"/"</span>&gt;Root&lt;<span class="hljs-regexp">/Link&gt; &lt;Router&gt; &lt;Route path='/</span><span class="hljs-string">' component={RootComponent}/&gt; &lt;/Router&gt; //使用 `&lt;script&gt;` 标签 &lt;script src="../js/<a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>Router.js"&gt;&lt;/script&gt; &lt;ReactRouter.Link to="/"&gt;Root&lt;/ReactRouter.Link&gt; &lt;ReactRouter.Router&gt; &lt;ReactRouter.Route path='</span>/<span class="hljs-string">' component={RootComponent}/&gt; &lt;/ReactRouter.Router&gt;</span></code></pre> <h1 id="articleHeader3">路由组件与属性</h1> <h2 id="articleHeader4">Link</h2> <ul> <li>用于路由之间跳转,功能等同于 <code>a</code> 标签。</li> <li>属性 <code>to</code> 等同于 <code>a</code> 标签的 <code>href</code>。</li> <li> <code>&lt;Link to="/page"&gt;page&lt;/Link&gt;</code>,作用等同于 <code>&lt;a href="#/page"&gt;page&lt;/a&gt;</code>。</li> </ul> <h2 id="articleHeader5">Router</h2> <ul> <li>是最外层的路由组件,整个 Application 仅一个。</li> <li> <p>属性 <code><a href="http://www.js-code.com/tag/history" title="history" target="_blank">history</a></code> 有两个属性值:</p> <ul> <li> <code>hashHistory</code> 路由将通过URL的hash部分(#)切换,推荐使用。</li> <li> <code>&lt;Router <a href="http://www.js-code.com/tag/history" title="history" target="_blank">history</a>={hashHistory}&gt;</code> 对应的 URL 形式类似 example.com/#/some/path</li> <li> <code>browserHistory</code> 这种情况需要对服务器改造。否则用户直接向服务器请求某个子路由,会显示网页找不到的404错误。</li> <li> <code>&lt;Router <a href="http://www.js-code.com/tag/history" title="浏览关于“history”的文章" target="_blank" class="tag_link">history</a>={browserHistory}&gt;</code> 对应的 URL 形式类似 example.com/some/path。</li> </ul> </li> </ul> <h2 id="articleHeader6">Route 组件的属性</h2> <ul> <li> <code>Route</code> 是组件 <code>Router</code> 子组件,可以通过嵌套 <code>route</code> 来实现路由嵌套。</li> <li>属性 <code>path</code>:指定路由的匹配规则,这个属性是可以省略的,这样的话,不管路径是否匹配,总是会加载指定组件。</li> <li>属性 <code>component</code>:指当 URL 映射到路由的匹配规则时会渲染对应的组件。</li> <li> <code>&lt;Route path="/" component={RootComponent}/&gt;</code> 当 URL 为 example.com/#/ 时会渲染组件 RootComponent</li> <li> <code>&lt;Route path="/page1" component={Page1Component}/&gt;</code> 当 URL 为 example.com/#/page1 时会渲染组件 Page1Component</li> </ul> <h1 id="articleHeader7">基本用法</h1> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> from 'react'<br /> import React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> from 'react-<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m'<br /> import {Router, hashHistory, browserHistory} from 'react-router'</p> <p><a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> html = (</p> <ul> <li><Link to=&quot;/&quot;>Root</Link></li> <li><Link to=&quot;/page&quot;>page</Link></li> </ul> <p>)</p> <p>class RootComponent <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> React.Component{<br /> render(){<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (</p> <div> <h1>RootComponent</h1> <p> {html} </p></div> <p> )<br /> }<br /> }</p> <p>class PageComponent <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> React.Component{<br /> render(){<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (</p> <div> <h1>PageComponent</h1> <p> {html} </p></div> <p> )<br /> }<br /> }</p> <p>React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render(<br /> <Router history={hashHistory}><br /> <Route path='/' component={RootComponent}></Route><br /> <Route path='/page' component={PageComponent}></Route><br /> </Router>,<br /> document.getElementById('app')<br /> )" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> React<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'react-<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m'</span> <span class="hljs-keyword">import</span> {Router, hashHistory, browserHistory} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> html = ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/"</span>&gt;</span>Root<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/page"</span>&gt;</span>page<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span> ) <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">RootComponent</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/extends" title="浏览关于“extends”的文章" target="_blank" class="tag_link">extends</a></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ render(){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>RootComponent<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> {html} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ) } } <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PageComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ render(){ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>PageComponent<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> {html} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ) } } ReactDOM.render( &lt;Router history={hashHistory}&gt; &lt;Route path='/' component={RootComponent}/&gt; &lt;Route path='/page' component={PageComponent}/&gt; &lt;/Router&gt;, <a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a>.getElementById('app') )</code></pre> <p><a href="https://dk-lan.github.io/react/router/index.html" rel="nofollow noreferrer" target="_blank">效果预览</a></p> <h1 id="articleHeader8">路由参数</h1> <ul> <li>路由的参数传递是通过 Route 组件的 path 属性来指定的。</li> <li>参数值可通过 <code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.params.paramName</code> 来获取。</li> <li> <p><code>:paramName</code></p> <ul> <li>匹配URL的一个部分,直到遇到下一个/、?、#为止。</li> <li> <code>&lt;Route path="/user/:<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>"&gt;</code> 。</li> <li>匹配 URL:/#/user/sam,参数 sam 为必须存在。</li> <li> <code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.params.<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a></code> 的值为 sam。</li> </ul> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="import React from 'react'<br /> import ReactDOM from 'react-<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m'<br /> import {Router, hashHistory, browserHistory} from 'react-router'</p> <p>class UserComponent extends React.Component{<br /> render(){<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (</p> <div> <h3>UserComponent 单个参数 </h3> <p>路由规则:path='/user/:user<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>'</p> <p>URL 映射:{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.<a href="http://www.js-code.com/tag/location" title="location" target="_blank">location</a>.pathname}</p> <p>username:{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.params.username}</p> </p></div> <p> )<br /> }<br /> }<br /> ReactDOM.render(<br /> <Router history={hashHistory}><br /> <Route path='/user/:username' component={UserComponent}></Route><br /> </Router>,<br /> document.getElementById('app')<br /> )" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span> <span class="hljs-keyword">import</span> {Router, hashHistory, browserHistory} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router'</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ render(){ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>UserComponent 单个参数 <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>路由规则:path='/user/:username'<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>URL 映射:{<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.props.<a href="http://www.js-code.com/tag/location" title="浏览关于“location”的文章" target="_blank" class="tag_link">location</a>.pathname}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>username:{this.props.params.username}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ) } } ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span> <span class="hljs-attr">history</span>=<span class="hljs-string">{hashHistory}</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">'/user/:username'</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{UserComponent}/</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span>, document.getElementById('app') )</span></code></pre> <ul> <li> <p><code>(:paramName)</code></p> <ul> <li>表示URL的这个部分是可选的。</li> <li> <code>&lt;Route path="/order(/:orderid)"&gt;</code> 。</li> <li>匹配 URL:/#/order,<code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.params.orderid</code> 获取的值为 <a href="http://www.js-code.com/tag/undefined" title="undefined" target="_blank">undefined</a>。</li> <li>匹配 URL:/#/order/001,<code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.params.orderid</code>获取参数的值为 001。</li> </ul> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React from 'react' import ReactDOM from 'react-dom' import {Router, hashHistory, browserHistory} from 'react-router' class UserComponent extends React.Component{ render(){ <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (</p> <div> <h3>OrderComponent 可选参数 </h3> <p>路由规则:path='/order(/:orderid)'</p> <p>URL 映射:{this.props.<a href="http://www.js-code.com/tag/location" title="location" target="_blank">location</a>.pathname}</p> <p>orderid:{this.props.params.orderid}</p> </p></div> <p> )<br /> }<br /> }<br /> ReactDOM.render(<br /> <Router history={hashHistory}><br /> <ReactRouter.Route path='/order(/:orderid)' component={UserComponent}></ReactRouter.Route><br /> </Router>,<br /> document.getElementById('app')<br /> )" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span> <span class="hljs-keyword">import</span> {Router, hashHistory, browserHistory} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router'</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ render(){ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>OrderComponent 可选参数 <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>路由规则:path='/order(/:orderid)'<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>URL 映射:{this.props.location.pathname}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>orderid:{this.props.params.orderid}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ) } } ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span> <span class="hljs-attr">history</span>=<span class="hljs-string">{hashHistory}</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ReactRouter.Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">'/order(/:orderid)'</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{UserComponent}/</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span>, document.getElementById('app') )</span></code></pre> <ul> <li> <p><code>*.*</code></p> <ul> <li>匹配任意字符,直到模式里面的下一个字符为止。匹配方式是非贪婪模式。</li> <li> <code>&lt;Route path="/<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a>1/*.*"&gt;</code> 。</li> <li> <code>this.props.params</code> 获取的参数为一个固定的对象: <code>{splat: [*, *]}</code>。</li> <li>匹配 URL:/<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a>1/001.jpg,参数为 <code>{splat: ['001', 'jpg']}</code>。</li> <li>匹配 URL:/all1/001.html,参数为 <code>{splat: ['001', 'html']}</code>。</li> </ul> </li> <li> <p><code>*</code></p> <ul> <li>匹配任意字符,直到模式里面的下一个字符为止。匹配方式是非贪婪模式。</li> <li> <code>&lt;Route path="/all2/*"&gt;</code>。</li> <li> <code>this.props.params</code> 获取的参数为一个固定的对象: <code>{splat: '*'}</code>。</li> <li>匹配 URL:/all2/,参数为 <code>{splat: ''}</code>。</li> <li>匹配 URL:/all2/a,参数为 <code>{splat: 'a'}</code>。</li> <li>匹配 URL:/all2/a/b,参数为 <code>{splat: 'a/b'}</code>。</li> </ul> </li> <li> <p><code>**</code></p> <ul> <li>匹配任意字符,直到下一个/、?、#为止。匹配方式是贪婪模式。</li> <li><code>&lt;Route path="/**/*.jpg"&gt;</code></li> <li> <code>this.props.params</code> 获取的参数为一个固定的对象: <code>{splat: [**, *]}</code>。</li> <li>匹配 URL:/all3/a/001.jpg,参数为 <code>{splat: ['a', '001']}</code>。</li> <li>匹配 URL:/all3/a/b/001.jpg,参数为 <code>{splat: ['a/b', '001']}</code>。</li> </ul> </li> </ul> <p><a href="https://dk-lan.github.io/react/router/params.html" rel="nofollow noreferrer" target="_blank">效果预览</a></p> <h1 id="articleHeader9">IndexRoute</h1> <p>当访问一个嵌套路由时,指定默认显示的组件</p> <h4>AppComponent.js</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React from 'react' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> class AppComponent extends React.Component{<br /> render(){<br /> return </p> <div>{this.props.children}</div> <p> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ render(){ <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>{this.props.children}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> } }</code></pre> <h4>LoginComponent.js</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React, {Component} from 'react' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> class LoginComponent extends Component{<br /> login(){}<br /> render(){<br /> return </p> <h1>Login</h1> <p> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> React, {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LoginComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{ login(){} render(){ <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Login<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span> } }</code></pre> <h4>HomeComponent.js</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React, {Component} from 'react' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default class HomeComponent extends Component{<br /> login(){}<br /> render(){<br /> return </p> <h1>Home</h1> <p> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> React, {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HomeComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{ login(){} render(){ <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span> } }</code></pre> <h4>Router.js</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React from 'react' import {Route, IndexRoute} from 'react-router' import AppComponent from '../components/app/app' import HomeComponent from '../components/home/home' import LoginComponent from '../components/login/login' <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> routes = (<br /> <Route path=&quot;/&quot; component={AppComponent}><br /> <IndexRoute component={HomeComponent} ></IndexRoute><br /> <Route path=&quot;login&quot; component={LoginComponent} ></Route><br /> <Route path=&quot;home&quot; component={HomeComponent} ></Route><br /> </Route><br /> )</p> <p>export default routes;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> {Route, IndexRoute} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router'</span> <span class="hljs-keyword">import</span> AppComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/app/app'</span> <span class="hljs-keyword">import</span> HomeComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/home/home'</span> <span class="hljs-keyword">import</span> LoginComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/login/login'</span> <span class="hljs-keyword">const</span> routes = ( &lt;Route path="/" component={AppComponent}&gt; &lt;IndexRoute component={HomeComponent} /&gt; &lt;Route path="login" component={LoginComponent} /&gt; &lt;Route path="home" component={HomeComponent} /&gt; &lt;/Route&gt; ) export default routes;</code></pre> <ul> <li>如果没有加<code>IndexRoute</code>,则在访问 <code>http://localhost/#/</code> 时页面是空白的</li> <li>访问 <code>http://localhost/#/login</code> 才会显示内容</li> <li>加上 <code>IndexRoute</code>,在访问<code>http://localhost/#/</code>时会默认渲染<code>HomeComponent</code> </li> </ul> <h1 id="articleHeader10">模块化</h1> <p>可利用组件<code>Router</code>的属性<code>routes</code>来实现组件模块化</p> <h4>router.js</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React from 'react' import ReactDOM from 'react-dom' import {Route, Router, IndexRoute, hashHistory} from 'react-router' import AppComponent from '../components/app/app' import HomeComponent from '../components/home/home' import LoginComponent from '../components/login/login' <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> routes = (<br /> <Route path=&quot;/&quot; component={AppComponent}><br /> <IndexRoute component={HomeComponent} ></IndexRoute><br /> <Route path=&quot;login&quot; component={LoginComponent} ></Route><br /> <Route path=&quot;home&quot; component={HomeComponent} ></Route><br /> </Route><br /> )</p> <p>ReactDOM.render(<br /> <Router history={hashHistory} routes={routes} ></Router>,<br /> document.getElementById('app')<br /> )" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span> <span class="hljs-keyword">import</span> {Route, Router, IndexRoute, hashHistory} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router'</span> <span class="hljs-keyword">import</span> AppComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/app/app'</span> <span class="hljs-keyword">import</span> HomeComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/home/home'</span> <span class="hljs-keyword">import</span> LoginComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/login/login'</span> <span class="hljs-keyword">const</span> routes = ( &lt;Route path="/" component={AppComponent}&gt; &lt;IndexRoute component={HomeComponent} /&gt; &lt;Route path="login" component={LoginComponent} /&gt; &lt;Route path="home" component={HomeComponent} /&gt; &lt;/Route&gt; ) ReactDOM.render( &lt;Router history={hashHistory} routes={routes} /&gt;, document.getElementById('app') )</code></pre> <h1 id="articleHeader11">编程式导航</h1> <ul> <li>普通跳转 <code>this.props.router.push('/home/c<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>')</code> </li> <li>带参数跳转<code>this.props.router.push({pathname: '/home/c<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>', query: {name: 'tom'}})</code> </li> </ul> <h1 id="articleHeader12">路由钩子函数</h1> <p>每个路由都有<code>enter</code>和<code>leave</code>两个钩子函数,分别代表用户进入时和离开时触发。</p> <h3 id="articleHeader13">onEnter</h3> <p>进入路由<code>/home</code>前会先触发<code>onEnter</code>方法,如果已登录,则直接<code>next()</code>正常进入目标路由,否则就先修改目标路径<code>replace({ pathname: 'login' })</code>,再<code>next()</code>跳转。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let isLogin = (nextState, replace, next) => {<br /> <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>(<a href="http://www.js-code.com/tag/window" title="window" target="_blank">window</a>.localStorage.getItem('auth') == 'admin'){<br /> next()<br /> } <a href="http://www.js-code.com/tag/else" title="else" target="_blank">else</a> {<br /> replace({ pathname: 'login' })<br /> next();<br /> }</p> <p>}<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> routes = (<br /> <Route path=&quot;/&quot; component={AppComponent}><br /> <Route path=&quot;login&quot; component={LoginComponent} ></Route><br /> <Route path=&quot;home&quot; component={HomeComponent} onEnter={isLogin}></Route><br /> </Route><br /> )" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> isLogin = <span class="hljs-function">(<span class="hljs-params">next<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a>, replace, next</span>) =&gt;</span> { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span>(<span class="hljs-built_in"><a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a></span>.localStorage.getItem(<span class="hljs-string">'auth'</span>) == <span class="hljs-string">'admin'</span>){ next() } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> { replace({ <span class="hljs-attr">pathname</span>: <span class="hljs-string">'login'</span> }) next(); } } <span class="hljs-keyword">const</span> routes = ( &lt;Route path="/" component={AppComponent}&gt; &lt;Route path="login" component={LoginComponent} /&gt; &lt;Route path="home" component={HomeComponent} onEnter={isLogin}/&gt; &lt;/Route&gt; )</code></pre> <h3 id="articleHeader14">onLeave</h3> <p>对应的<code>setRouteLeaveHook</code>方法,如果<code>return <a href="http://www.js-code.com/tag/true" title="true" target="_blank">true</a></code>则正常离开,否则则还是停留在原路由</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React from 'react' import {Link} from 'react-router' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default class Component1 extends React.Component{<br /> componentDidMount(){<br /> this.props.router.setRouteLeaveHook(<br /> this.props.route,<br /> this.routerWillLeave<br /> )<br /> }<br /> routerWillLeave(){<br /> return '确认要离开?'<br /> }<br /> render(){<br /> return (</p> <div> <Link to=&quot;/login&quot;>Login</Ling> </div> <p> )<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> {Link} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Component1</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ componentDidMount(){ <span class="hljs-keyword">this</span>.props.router.setRouteLeaveHook( <span class="hljs-keyword">this</span>.props.route, <span class="hljs-keyword">this</span>.routerWillLeave ) } routerWillLeave(){ <span class="hljs-keyword">return</span> <span class="hljs-string">'确认要离开?'</span> } render(){ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/login"</span>&gt;</span>Login<span class="hljs-tag">&lt;/<span class="hljs-name">Ling</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ) } }</code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

React 教程第十篇 —— 路由(3.0)

全部内容,希望文章能够帮你解决

React 教程第十篇 —— 路由(3.0)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过