`
_wyh
  • 浏览: 61057 次
社区版块
存档分类
最新评论

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

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

  • 大小: 18.2 KB
0
0
分享到:
评论

相关推荐

    react-router4.2使用js控制路由跳转的3种方式

    针对React Router 4.2版本,本文将详细介绍三种使用JavaScript来控制路由跳转的方法: ##### 方法一:使用`&lt;Redirect&gt;`组件 `&lt;Redirect&gt;`组件是React Router提供的一种用于在客户端重定向的组件。当其渲染时,它会...

    react Router 路由, 简单示例

    # react Router 路由 ### 项目介绍: 见我的这篇博客: https://blog.csdn.net/waterHBO/article/details/142108837?spm=1001.2014.3001.5501 ### 此项目的环境,使用的是 vite,可以直接运行: &gt; npm run dev ##...

    浅谈react-router@4.0 使用方法和源码分析

    在本篇文章中,将详细讨论React Router v4版本的使用方法和源码分析,该版本相较于之前的版本有了较大的改变,尤其是路由配置方式由嵌套路由变为了“路由优先”的思想。 首先,我们来谈谈React Router v4的使用方法...

    React-router4路由监听的实现

    通过上述方法,我们利用React-router4的特性以及React组件的生命周期函数,成功实现了一个高效且简洁的路由监听机制,可以根据当前路由动态地更改网页标题。这种模式的优点是它充分利用了React的声明式特性,使得...

    React Router 中文文档 pdf

    - **组件生命周期**:介绍如何利用 React Router 提供的生命周期方法来执行页面加载或卸载时的操作。 - **组件外部跳转**:通过 `Link` 组件之外的方式进行页面间的导航,例如使用 `&lt;a&gt;` 标签或 JavaScript。 #### ...

    最简单的脚手架工具搭建的react实现路由和状态机demo

    本项目"最简单的脚手架工具搭建的react实现路由和状态机demo"正是基于`create-react-app`创建的,它展示了如何在React应用中集成路由管理和状态管理。 首先,`create-react-app`是Facebook官方推出的用于创建React...

    react router

    - **Nested Routing**:React Router 支持嵌套路由,即在某个组件内部使用`Route`来渲染子组件。这有助于构建更复杂的多层导航结构。 - **Programmatic Navigation**:通过`props.history`对象,可以编程方式改变...

    ReactRouter是React的一个完整路由库

    React Router 是React生态中的一个核心组件,用于管理应用程序的页面导航和状态,使得在React应用中实现客户端路由变得简单高效。作为一个完整的路由库,它提供了丰富的功能和灵活性,帮助开发者构建复杂的单页应用...

    15 React路由 react-router4.x 动态路由以及get传值 React中使用url模块

    本教程主要探讨的是React Router 4.x中的动态路由和GET参数传递,以及如何在React中使用`url`模块。 首先,让我们来理解动态路由的概念。在React Router中,动态路由允许我们创建可变的路径,以匹配不同参数。这...

    redux+react+router+node.js

    React Router是React的路由库,它允许你在React组件之间进行导航,并且可以将URL与组件映射起来。React Router的使用可以实现SPA(单页面应用)的功能,用户在页面间切换时无需重新加载整个页面,而是只更新相应的...

    react-reactroutertransition构建用于reactrouter转场效果基于reactmotion实现

    首先,`react-router`是React社区广泛使用的路由管理库,它允许我们在应用中定义和管理不同的路由,实现组件的按需加载和页面间的导航。然而,`react-router`本身并不直接支持复杂的转场动画,这就是`react-router-...

    react-router

    在本实例中,我们将深入探讨 `react-router` 的核心概念和使用方法。 首先,React Router 提供了三种主要的路由组件:`BrowserRouter`, `HashRouter` 和 `MemoryRouter`。`BrowserRouter` 使用 HTML5 的 History ...

    React Router 的基本应用-案例

    此外,React Router还提供了`NavLink`、`Prompt`、`Redirect`等组件以及`useHistory`、`useLocation`、`useParams`、`useRouteMatch`等hooks,用于更复杂的路由操作和状态管理。 在这个案例中,你只需替换`src`目录...

    react-基于react16reactrouter4typescriptreactredux的移动端音乐播放器

    2. **React Router 4**:React Router是React社区的一个流行路由库,它允许我们在应用中实现URL与组件之间的映射。React Router 4采用了全新的API设计,强调以“路由配置”为中心。在这个音乐播放器中,它可能用于...

    ReactRouter中⽂⽂档高清pdf格式

    资源名称:React Router 中⽂⽂档 高清pdf格式内容简介:React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。这里脚本之家小编提供的是...

    react-router-dom5.0的路由拦截.rar

    react-router-dom5.0的路由拦截 守卫 demo 封装好的 可以直接套用,方便研究使用,直接移植,对着修改,安装 redux等就行,免 c币 下载地址 http://download.lllomh.com/cliect/#/product/J615178556091098

    React路由管理之React Router总结

    React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查。 React Router是做什么的呢,官方的介绍是: A complete ...

    路由react简单使用简单的简单的

    在React.js的世界里,路由是实现页面间导航的关键技术,它允许我们根据用户的操作或URL的变化来加载...通过以上基础的使用方法,你可以构建起一个功能完备的React应用,随着需求的深入,再逐步学习和应用更高级的特性。

Global site tag (gtag.js) - Google Analytics