这篇文章主要为大家展示了“React Router怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React Router怎么用”这篇文章吧。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名申请、虚拟主机、营销软件、网站建设、十堰郧阳网站维护、网站推广。

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 
First
 }
}
class Second extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return 
Second
 }
}
class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return 

 }
}

render((
 
 
 
 
 
 ),
 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 =
 

 
 
 
 
;
render(, document.getElementById('box'));

需要注意的是{routes}中只能有一个父级，所以这里加了

class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return 
{this.props.children}
 }
}
render((
 
 
 
 
 
 
 ),
 document.getElementById('box')
);

let routes =
 
 
 
 ;
render(, document.getElementById('box'));

class First extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 
First
 Basic
 
 )
 }
}
class Second extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return 
Second
 }
}
class Basic extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 
 
Basic
 
First
 
Second
 
 )
 }
}
class App extends Component {
 constructor(props) {
 super(props);
 }

 render() {
 return 

 {this.props.children}
 
 }
}
render((
 
 
 
 
 
 
 
 ),
 document.getElementById('box')
);

render((
 
 
 
 
 
 
 
 
 
 ),
 document.getElementById('box')
);

 // 匹配 /hello/michael 和 /hello/ryan
 // 匹配 /hello, /hello/michael, 和 /hello/ryan
 // 匹配 /files/hello.jpg 和 /files/hello.html
 // 匹配 /files/hello.jpg 和 /files/path/to/file.jpg

class First extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 
First {this.props.params.name}
 Basic
 
 )
 }
}
.
.

 {
 console.log(nextState);
 alert('onEnter');
 // replace('second');
 }} onLeave={() => {
 alert('onLeave');
 }}/>

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流