React路由管理之React Router总结

2023-09-13 00:50:05 71

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
Repos


{/*注意这里将子组件渲染出来*/}
{this.props.children}


)
}
//...

四有效链接

Link组件和a标签的不同点之一就在于Link可以知道其指向的路径是否是一个有效的路由。

About
Repos

可以使用activeStyle指定有效链接的样式，也可以使用activeClassName指定有效链接的样式类。

大多数时候，我们并不需要知道链接是否有效，但在导航中这个特性则十分重要。比如：可以在导航栏中只显示合法的路由链接。

//modules/NavLink.js
importReactfrom'react'
import{Link}from'react-router'

exportdefaultReact.createClass({
render(){
return
}
})

//modules/App.js
importNavLinkfrom'./NavLink'

//...

About
Repos

可以在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中的#。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

React路由管理之React Router总结

ReactRouterTutorial

ReactRouterTutorial

{this.props.params.repoName}

热门推荐

随机推荐