React Router基础使用
react是个技术栈,单单使用react很难构建复杂的web应用程序,很多情况下我们需要引入其他相关的技术
react router是react的路由库,保持相关页面部件与url间的同步
下面就来简单介绍其基础使用,更全面的可参考 指南
1. 它看起来像是这样
在页面文件中
在外部脚本文件中
2. 库的引入
react router库的引入,有两种方式
2.1 浏览器直接引入
可以引用 这里 的浏览器版本,或者下载之后引入
然后就可以直接使用 reactrouter 这个对象了,我们可能会使用到其中的几个属性
let {router, route, indexroute, redirect, indexredirect, link, indexlink, hashhistory, browserhistory} = reactrouter;
2.2 npm 安装,通过构建工具编译引入
npm install --save react-router
安装好路由库之后,在脚本文件中引入相关属性
import {router, route, indexroute, redirect, indexredirect, link, indexlink, hashhistory, browserhistory} from 'react-router';
因浏览器目前还不能支持import与export命令,且babel工具不会将require命令编译,所以我们还得需要如webpack等构建工具编译引入
库引入之后,在reactdom的render方法中,就可以使用相关的组件了
3. 路由简单使用
最基本的,通过url判断进入哪个页面(组件部件)
class first extends component { constructor(props) { super(props); } render() { return <p>first</p> } } class second extends component { constructor(props) { super(props); } render() { return <p>second</p> } } class app extends component { constructor(props) { super(props); } render() { return <div></div> } }
render(( <router history={hashhistory}> <route path="/" component={app} /> <route path="first" component={first} /> <route path="second" component={second} /> </router> ), document.getelementbyid('box') );
首先,router是一个容器,history属性定义了是用何种方式处理页面的url
- browserhistory:通过url的变化改变路由,是推荐的一种方式,但是需要在服务器端需要做一些配置(窝目前还不知怎么配)
- hashhistory:通过#/ ,其实就像是单页面应用中常见的hashbang方式,example.com/#/path/path.. (使用简单,这里暂且就用这种方式)
- creatememoryhistory:memory history 并不会从地址栏中操作或是读取,它能够帮助我们完成服务器端的渲染,我们得手动创建history对象
然后,在容器中使用route组件定义各个路由,通过path指定路径(可以看到,是不区分大小写的),通过component指定该路径使用的组件
也可以直接在router容器上直接用routes属性定义各个路由,如
let routes = <div> <route path="/" component={app} /> <route path="first" component={first} /> <route path="second" component={second} /> </div>; render(<router routes={routes} history={hashhistory}></router>, document.getelementbyid('box'));
需要注意的是{routes}中只能有一个父级,所以这里加了<div>标签
另外,路由route也可以嵌套,在上面的例子中,嵌套起来可能更符合实际情况
需要注意的是,这里的app在父级,为了获取子级的first与second组件,需要在app组件中添加 this.props.children 获取
class app extends component { constructor(props) { super(props); } render() { return <div>{this.props.children}</div> } } render(( <router history={hashhistory}> <route path="/" component={app}> <route path="first" component={first} /> <route path="second" component={second} /> </route> </router> ), document.getelementbyid('box') );
同样的,可以直接在router中用routes属性定义路由
let routes = <route path="/" component={app}> <route path="first" component={first} /> <route path="second" component={second} /> </route>; render(<router routes={routes} history={hashhistory}></router>, document.getelementbyid('box'));
4. 路由的其他组件
除了基本的route之外,indexroute、redirect、indexredirect、link、indexlink等,顾名思义
- indexroute: 在主页面会用到,如上个例子中,在路径"/"下我们看到的是空白页面,可以添加默认的页面组件用于导航
- link: 可以认为它是<a>标签在react中的实现,使用to属性定义路径,还可以通过activeclass或activestyle定义active的样式
- indexlink: 类似link,推荐用来定义指向主页面的链接,当然也可以随意定义
class first extends component { constructor(props) { super(props); } render() { return ( <p>first <indexlink to="/" activestyle={{color: 'red'}}>basic</indexlink> </p> ) } } class second extends component { constructor(props) { super(props); } render() { return <p>second</p> } } class basic extends component { constructor(props) { super(props); } render() { return ( <ul role="nav"> <li><indexlink to="/" activestyle={{color: 'red'}}>basic</indexlink></li> <li><link to="/first" activestyle={{color: 'red'}}>first</link></li> <li><link to="/second" activeclass="active">second</link></li> </ul> ) } } class app extends component { constructor(props) { super(props); } render() { return <div> {this.props.children} </div> } } render(( <router history={hashhistory}> <route path="/" component={app}> <indexroute component={basic} /> <route path="first" component={first} /> <route path="second" component={second} /> </route> </router> ), document.getelementbyid('box') );
- redirect: 从from路径重定向到to路径
- indexredirect: 在主页面,直接重定向到to路径
render(( <router history={hashhistory}> <route path="/" component={app}> <indexroute component={basic} /> <indexredirect to="first" /> <redirect from="second" to="first" /> <route path="first" component={first} /> <route path="second" component={second} /> </route> </router> ), document.getelementbyid('box') );
5. 路由的path规则
path定义的路由的路径,在hashhistory中,它的主页路径是 #/
自定义route路由通过与父route的path进行合并,在与主页路径合并,得到最终的路径
- :paramname 匹配 url 的一个部分,直到遇到下一个/、?、#
- () 表示url的这个部分是可选的
- * 匹配任意字符(非贪婪模式),直到模式里面的下一个字符为止
- ** 匹配任意字符(贪婪模式),直到下一个/、?、#为止
<route path="/hello/:name"> // 匹配 /hello/michael 和 /hello/ryan <route path="/hello(/:name)"> // 匹配 /hello, /hello/michael, 和 /hello/ryan <route path="/files/*.*"> // 匹配 /files/hello.jpg 和 /files/hello.html <route path="/**/*.jpg"> // 匹配 /files/hello.jpg 和 /files/path/to/file.jpg
而:name可以通过 this.props.params 中取到
class first extends component { constructor(props) { super(props); } render() { return ( <p>first {this.props.params.name} <indexlink to="/" activestyle={{color: 'red'}}>basic</indexlink> </p> ) } } . . <route path="/:name" component={first} />
通过react dev tool也可以看到组件的相关数据
6. 路由的onenter、onleave钩子
在路由的跳转中,我们可能需要在进入页面或离开页面的时候做一些特殊操作,route 通过 onenter 与 onleave 定义了这两个行为
<route path="first" component={first} onenter={(nextstate, replace) => { console.log(nextstate); alert('onenter'); // replace('second'); }} onleave={() => { alert('onleave'); }}/>
如上,带两个参数,通过 replace 可以更新路径,把注释去掉后,进入"/first"时立马跳转值"/second",这在检测登录时应该比较有用
更多的使用参见 指南
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
下一篇: 微信小程序实现的一键连接wifi功能示例