React Router路由的简单使用方法

路由系统可以在浏览器的URL发生改变的时候，做出一些响应，使页面与URL同步。

React Router是为React设计的一款路由库。

官方示例库：https://github.com/reactjs/react-router-tutorial/tree/master/lessons

效仿官方示例库，用一个简单的例子，了解路由的一些特性。使用es6。

效果如图：

1，配置web pack，安装依赖( react, react-dom, react-router等等 )

在根目录建立modules目录，在modules中创建App.js，代码如下：

import React, { Component } from 'react'

export default class App extends Component { 
        render() {  
            return (
                <div>Team</div> 
            );
        }
}

在根目录创建入口文件index.js，并引入Router和App，渲染到网页上

扫描二维码关注公众号，回复： 386817 查看本文章

import { Router, Route, hashHistory } from 'react-router' 
import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './modules/App.js' 

ReactDOM.render( 
    <Router history={hashHistory}> 
        <Route path="/" component={App} /> 
    </Router>, 
    document.getElementById('app')
 );

Router是一个容器，路由通过Route来定义

path=“/”，component={App} 代表当用户访问根路由/时，App通过document.getElementById('app')渲染。

根目录创建index.html，引入web pack打包生成的bundle.js

<!doctype html public "storage">
<html>
<meta charset=utf-8/>
<title>React Router</title>
<div id=app></div>
<script src="bundle.js"></script>

运行程序，网页 http://localhost:8080/ 上显示出Team

2，在modules目录里创建另外两个js文件，分别命名为War.js，Lak.js，代码如下

// War.js
import React, { Component } from 'react' 

export default class App extends Component {
    render() { 
        return ( 
            <div>Warrior</div> 
        ) 
    } 
}

//Lak.js
import React, { Component } from 'react' 

export default class App extends Component { 
    render() { 
        return ( 
            <div>Laker</div> 
        ) 
    } 
}

在index.js中增加代码，需要引入刚才创建的Lak.js和War.js

//index.js
  ReactDOM.render(   
      <Router history={hashHistory}>   
          <Route path="/" component={App} />      
          <Route path="/War" component={War} />     
          <Route path="/Lak" component={Lak} />    
      </Router>,    
      document.getElementById('app') 
);

手动在浏览器中输入http://localhost:8080/#/War和http://localhost:8080/#/Lak分别显示Warrior和Laker

3，改变程序，将War.js和Lak.js引入App.js

import React, { Component } from 'react'
import War from './War.js'
import Lak from './Lak.js'
import { Link } from 'react-router'
export default class App extends Component {
    render() {
        return (
            <div><h2>Team</h2>
            <ul>
                <li><Link to="/War">War</Link></li>
                <li><Link to="/Lak">Lak</Link></li>
            </ul>
        </div>         
        )
    }
}

Link组件生成一个连接，允许用户点击后跳转到另一个路由。基本就是React版本的<a>元素。to匹配Route中的path，接受Router状态，指定要跳到哪个路由。

在网页上点击War和Lak将进入指定的URL

4，使用嵌套路由，改变index.js，使指向War和Lak的Route做为Router的子组件

<Route path="/" component={App} > 
    <Route path="/War" component={War} /> 
    <Route path="/Lak" component={Lak} /> 
</Route>

在App.js的<ul>下面加上一句｛this.props.children｝

………    
     </ul>    
     {this.props.children}
………

在网页上点击War和Lak。Url改变，Warrior和Laker将显示在Lak下方

为了使点击的元素更容易辨识，将点击的元素颜色变为绿色，从而用到了activeStyle。

<li><Link activeStyle={{color: "green"}} to="/War">War</Link></li> 
<li><Link activeStyle={{color: "green"}} to="/Lak">Lak</Link></li>

5，使用params

在modules目录下创建Player.js

import React, { Component } from 'react'
export default class Lak extends Component {
    render() {
        return (      
            <div>{this.props.params.name}</div>     
        );
    }
}

修改War.js

import React, { Component } from 'react'
import { Link } from 'react-router'  
export default class War extends Component {
    render() {
        return (<div><h2>Warrior</h2>
            <ul>
                <li><Link to="War/Curry" activeStyle={{color: "red"}}>Steven</Link></li>
                <li><Link to="War/Durant" activeStyle={{color: "red"}}>Kevin</Link></li>
            </ul>
            {this.props.children}        
        </div>     
        );
    }
}

修改index.js

import { Router, Route, hashHistory } from 'react-router'
import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './modules/App.js' 
import Lak from './modules/Lak.js' 
import War from './modules/War.js'
import Player from './modules/Player.js'
ReactDOM.render(
    <Router history={hashHistory}> 
        <Route path="/" component={App}> 
            <Route path="/War" component={War}>
                <Route path="/War/:name" component={Player}/>
            </Route> 
            <Route path="/Lak" component={Lak}/> 
        </Route>
    </Router>, 
    document.getElementById('app')
);

点击War, 再点击Steven或Kevin，出现Curry或Durant

6，设置history

history有三种类型： browserHistory, hashHistory, createMemoryHistory

hashHistory：路由通过URL的（＃）切换，URL中包含＃

browserHistory：没有＃，显示正常路径，但是用户直接向服务器请求某个子路由时，会显示网页找不到。

解决方法：运行时终端输入 webpack-dev-server —inline —content-base . ——history-api-fallback

7，使用表单

在War中添加表单，使用browserHistory.push(path)来跳转

import React, { Component } from 'react'
 import { Link, browserHistory } from 'react-router'

export default class War extends Component {
    render() {
        return (
            <div><h2>Warrior</h2>
            <ul>
                <li><Link to="War/Curry" activeStyle={{color: "red"}}>Steven</Link></li>
                <li><Link to="War/Durant" activeStyle={{color: "red"}}>Kevin</Link></li>
            </ul>
            <form onSubmit={this.handleSubmit}>
                <input type="text"/>
                <button type="submit">Go</button>
            </form>
            {this.props.children}       
            </div>     
        );
    }

    handleSubmit(event) {
        event.preventDefault();
        const name = event.target.elements[0].value;
        const path = "War/" + name;
        browserHistory.push(path);
    }
}

input框中输入，点击按钮GO，下面出现输入的内容。

OK!!!

React Router路由的简单使用方法

猜你喜欢