react-router實現(xiàn)路由跳轉(zhuǎn)

0. 前言

學(xué)習(xí)react是一條漫長的路懂更，但是只要我們堅持下去，再遠(yuǎn)的路也可以走到盡頭急膀。好沮协，好，好卓嫂，難喝的一碗雞湯？对荨！晨雳！哈哈行瑞，其實奸腺，我就是想說，react的東西太多了血久，可能我們學(xué)會的只是一個邊邊角角洋机，所以還要不斷的學(xué)習(xí)！Ｑ蠡辍绷旗！

timg.jpeg

1.簡介

react-router它通過管理 URL，實現(xiàn)組件的切換和狀態(tài)的變化副砍，在開發(fā)復(fù)雜的應(yīng)用的時候幾乎肯定會用的到衔肢。

2. 怎么用react-router實現(xiàn)路由跳轉(zhuǎn)？

在這里呢豁翎！我就不說怎么配置react的項目過程了角骤，在前面的文章我已經(jīng)有說過，所以心剥，就不再演一遍了邦尊，雖然我有理，但是优烧，我也挺懶的蝉揍，不想在來一遍了，想知道怎么配置的盆友可以點擊http://www.reibang.com/p/f10babb8790d畦娄，當(dāng)然你會配置的童鞋又沾，請繞過，不會的呢熙卡，你就多費點時間看一看杖刷，看完了配置react項目，再來看怎么配置路由的驳癌。滑燃。。

一颓鲜、基本用法

react-router 安裝命令如下：
$ npm install react-router --save

當(dāng)然表窘，你通過這個指令安裝的react-router的版本是4.0版本的，因為4.0版本跟以前的版本有一些出入灾杰，如果你覺得可能會出現(xiàn)問題我們可以安裝指定的版本蚊丐，通過下面的指令制定安裝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組件有一個參數(shù)history呛梆，它的值用hashHistory表示锐涯，路由的切換由URL的hash變化決定，即URL的#部分發(fā)生變化填物。舉例來說纹腌，用戶訪問http://www.example.com/，實際會看到的是http://www.example.com/#/滞磺。

Route組件定義了URL路徑與組件的對應(yīng)關(guān)系升薯。你可以同時使用多個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. 代碼實現(xiàn)

首先呢，怎么配置的文件脸哀，我是真的不說了蹦浦，你不知道怎么配置的就去看我上一篇的文章吧！Ｆ蟛洹白筹！好，開始Ａ律恪！系馆！

一送漠、index.html

其實，index.html頁面沒多少東西由蘑，他的主要作用就是相當(dāng)于一個容器闽寡，把我們寫好的組件渲染到我們的容器里。

<!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

是不是應(yīng)用到我們在上面說的那些東西

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文件以及下面的文件

因為我們想看一下在網(wǎng)址發(fā)生改變的時候，內(nèi)容是不是相應(yīng)的發(fā)生改變裳擎，所以建立一個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;

四、看一下代碼渲染之后的效果

這里還必須得說一句，你如果看了我寫的上一篇文章羡微，那么你會發(fā)現(xiàn)其實改的東西不多谷饿，就是添加一個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/>標(biāo)簽，估計你就有點懵懵懂懂的感覺了松忍。蒸殿。。

六鸣峭、看一下點擊實現(xiàn)路由切換的效果

這里呢宏所，就不廢話了，有圖有真像摊溶。爬骤。。