当前位置： 移动技术网 > IT编程>开发语言>JavaScript > React Router基础使用

React Router基础使用

2019年07月19日  | 移动技术网IT编程  | 我要评论

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进行合并，在与主页路径合并，得到最终的路径

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"，这在检测登录时应该比较有用

更多的使用参见 指南

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网