0. 前言
学习react是一条漫长的路，但是只要我们坚持下去，再远的路也可以走到尽头。好，好，好，难喝的一碗鸡汤！！！哈哈，其实，我就是想说，react的东西太多了，可能我们学会的只是一个边边角角，所以还要不断的学习！！！
timg.jpeg
1.简介
react-router它通过管理 URL，实现组件的切换和状态的变化，在开发复杂的应用的时候几乎肯定会用的到。
2. 怎么用react-router实现路由跳转？
在这里呢！我就不说怎么配置react的项目过程了，在前面的文章我已经有说过，所以，就不再演一遍了，虽然我有理，但是，我也挺懒的，不想在来一遍了，想知道怎么配置的盆友可以点击http://www.jianshu.com/p/f10babb8790d，当然你会配置的童鞋，请绕过，不会的呢，你就多费点时间看一看，看完了配置react项目，再来看怎么配置路由的。。。
一、基本用法
react-router 安装命令如下：
$ npm install react-router --save
当然，你通过这个指令安装的react-router的版本是4.0版本的，因为4.0版本跟以前的版本有一些出入，如果你觉得可能会出现问题我们可以安装指定的版本，通过下面的指令制定安装react-router 3.0版本如下：
npm install react-router@3 --save
使用时，路由器Router就是React的一个组件。
import { Router } from 'react-router';
render(<Router/>, document.getElementById('app'));
Router组件本身只是一个容器，真正的我们使用路由时候要通过Route组件定义。
import { Router, Route, hashHistory } from 'react-router';
render((
<Router history={hashHistory}>
<Route path="/" component={App}/>
</Router>
), document.getElementById('app'));
上面代码中，用户访问根路由/（比如http://www.example.com/），组件APP就会加载到document.getElementById('app')。
你可能还注意到，Router组件有一个参数history，它的值用hashHistory表示，路由的切换由URL的hash变化决定，即URL的#部分发生变化。举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/。
Route组件定义了URL路径与组件的对应关系。你可以同时使用多个Route组件。
<Router history={hashHistory}>
<Route path="/" component={App}/>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Router>
上面代码中，用户访问/repos（比如http://localhost:8080/#/repos）时，加载Repos组件；访问/about（http://localhost:8080/#/about）时，加载About组件。
3. 代码实现
首先呢，怎么配置的文件，我是真的不说了，你不知道怎么配置的就去看我上一篇的文章吧！！！好，开始！！！
一、index.html
其实，index.html页面没多少东西，他的主要作用就是相当于一个容器，把我们写好的组件渲染到我们的容器里。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Hello World</title>
</head>
<body>
<div id = "app"></div>
<script type="text/javascript" src = "index.js"></script>
</body>
</html>
二、main.jsx
是不是应用到我们在上面说的那些东西
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
render((
<Router history={hashHistory}>
<Route path="/" component={App}></Route>
<Route path="/repos" component={Repos}></Route>
<Route path="/about" component={About}></Route>
</Router>
), document.getElementById('app'))
三、modules文件以及下面的文件
因为我们想看一下在网址发生改变的时候，内容是不是相应的发生改变，所以建立一个modules文件，
3239FF7E-CEC8-49E1-A129-534C198693E4.png
About.js文件
import React from 'react';
class About extends React.Component {
render() {
return <div>About</div>
}
}
export default About;
Repos.js文件
import React from 'react';
class Repos extends React.Component {
render() {
return <div>Repos</div>
}
}
export default Repos;
App.js
import React from 'react';
class App extends React.Component {
render() {
return <div>Hello, React Router!</div>
}
}
export default App;
四、看一下代码渲染之后的效果
这里还必须得说一句，你如果看了我写的上一篇文章，那么你会发现其实改的东西不多，就是添加一个modules文件夹，还有就是安装一下react-router这个路由。
好了，废话不说了，看效果
GIF.gif
五、点击切换路由
上面的代码几乎不怎么改变，改变的主要是App.js文件，其他的文件不用改变，看代码
import React from 'react'
import { Link } from 'react-router'
class App extends React.Component{
render() {
return (
<div>
<h1>React Router learning</h1>
<ul role="nav">
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
</div>
)
}
}
export default App;
在这里我告诉你一个秘密，Link类似于之前用过的<a/>标签，估计你就有点懵懵懂懂的感觉了。。。
六、看一下点击实现路由切换的效果
这里呢，就不废话了，有图有真像。。。
GIF.gif
4. 结束语
好了，react-router就写着么多吧，希望我写的东西，能够给正在学习react的同学一点帮助！！！可以点赞，分享！
网友评论