React路由管理之React Router总结
React项目通常都有很多的URL需要管理,最常使用的解决方案就是ReactRouter了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查。
ReactRouter是做什么的呢,官方的介绍是:
AcompleteroutinglibraryforReact,keepsyourUIinsyncwiththeURL.IthasasimpleAPIwithpowerfulfeatureslikelazycodeloading,dynamicroutematching,andlocationtransitionhandlingbuiltrightin.MaketheURLyourfirstthought,notanafter-thought.
大意即:让UI组件和URL保持同步,通过简单的API即可实现强大的特性如:代码懒加载,动态路由匹配,路径过渡处理等。
下面是一些ReactRouter的用法:
一简单渲染Route
有一点需要牢记于心,Router是作为一个React组件,可以进行渲染。
//... import{Router,Route,hashHistory}from'react-router' render((),document.getElementById('app'))
这里使用了hashHistory-它管理路由历史与URL的哈希部分。
添加更多的路由,并指定它们对应的组件
importAboutfrom'./modules/About' importReposfrom'./modules/Repos' render((),document.getElementById('app'))
二Link
//modules/App.js importReactfrom'react' import{Link}from'react-router' exportdefaultReact.createClass({ render(){ return() } })ReactRouterTutorial
About Repos
这里使用了Link组件,它可以渲染出链接并使用to属性指向相应的路由。
三嵌套路由
如果我们想添加一个导航栏,需要存在于每个页面上。如果没有路由器,我们就需要封装一个一个nav组件,并在每一个页面组件都引用和渲染。随着应用程序的增长代码会显得很冗余。React-router则提供了另一种方式来嵌套共享UI组件。
实际上,我们的app都是一系列嵌套的盒子,对应的url也能够说明这种嵌套关系:
{/*url/*/} {/*url/repos*/} {/*url/repos/123*/}
因此,可以通过把子组件嵌套到公共组件App上使得App组件上的导航栏Nav等公共部分能够共享:
//index.js //... render(({/*注意这里把两个子组件放在Route里嵌套在了App的Route里/} ),document.getElementById('app'))
接下来,在App中将children渲染出来:
//modules/App.js //... render(){ return() } //...ReactRouterTutorial
About {/*注意这里将子组件渲染出来*/} {this.props.children} Repos
四有效链接
Link组件和a标签的不同点之一就在于Link可以知道其指向的路径是否是一个有效的路由。
可以使用activeStyle指定有效链接的样式,也可以使用activeClassName指定有效链接的样式类。
大多数时候,我们并不需要知道链接是否有效,但在导航中这个特性则十分重要。比如:可以在导航栏中只显示合法的路由链接。
//modules/NavLink.js importReactfrom'react' import{Link}from'react-router' exportdefaultReact.createClass({ render(){ return } })
//modules/App.js importNavLinkfrom'./NavLink' //...
可以在NavLink中指定只有.active的链接才显示,这样如果路由无效,则该链接就不会出现在导航栏中了。
五URL参数
考虑下面的url:
/repos/reactjs/react-router
/repos/facebook/react
他们可能对应的是这种形式:
/repos/:userName/:repoName
:后面是可变的参数
url中的可变参数可以通过this.props.params[paramsName]获取到:
//modules/Repo.js importReactfrom'react' exportdefaultReact.createClass({ render(){ return({/*注意这里通过this.props.params.repoName获取到url中的repoName参数的值*/}) } }){this.props.params.repoName}
//index.js //... //importRepo importRepofrom'./modules/Repo' render(({/*注意这里的路径带了:参数*/} ),document.getElementById('app'))
接下来访问/repos/reactjs/react-router和/repos/facebook/react就会看到不同的内容了。
六默认路由
//index.js import{Router,Route,hashHistory,IndexRoute}from'react-router' //andtheHomecomponent importHomefrom'./modules/Home' //... render(({/*注意这里*/} ),document.getElementById('app'))
这里添加了IndexRoute来指定默认的路径/所对应的组件。注意它没有path属性值。
同理也有默认链接组件IndexLink。、
七使用BrowserHistory
前面的例子一直使用的是hashHistory,因为它一直可以运行,但更好的方式是使用BrowserHistory,它可以不依赖哈希端口(#)。
首先需要改index.js:
//... //bringin`browserHistory`insteadof`hashHistory` import{Router,Route,browserHistory,IndexRoute}from'react-router' render(( {/*注意这里*/}{/*...*/} ),document.getElementById('app'))
其次需要修改webpack的本地服务配置,打开package.json添加–history-api-fallback:
"start":"webpack-dev-server--inline--content-base.--history-api-fallback"
最后需要在index.html中将文件的路径改为相对路径:
这样就去掉了url中的#。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。