欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React Router路由的简单使用方法

程序员文章站 2022-03-16 17:33:58
...

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

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

        

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

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

        效果如图:


                 React Router路由的简单使用方法
  

         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,渲染到网页上

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