react-router实现路由跳转

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/>标签，估计你就有点懵懵懂懂的感觉了。。。

六、看一下点击实现路由切换的效果

这里呢，就不废话了，有图有真像。。。