路由系统可以在浏览器的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!!!
相关推荐
针对React Router 4.2版本,本文将详细介绍三种使用JavaScript来控制路由跳转的方法: ##### 方法一:使用`<Redirect>`组件 `<Redirect>`组件是React Router提供的一种用于在客户端重定向的组件。当其渲染时,它会...
# react Router 路由 ### 项目介绍: 见我的这篇博客: https://blog.csdn.net/waterHBO/article/details/142108837?spm=1001.2014.3001.5501 ### 此项目的环境,使用的是 vite,可以直接运行: > npm run dev ##...
在本篇文章中,将详细讨论React Router v4版本的使用方法和源码分析,该版本相较于之前的版本有了较大的改变,尤其是路由配置方式由嵌套路由变为了“路由优先”的思想。 首先,我们来谈谈React Router v4的使用方法...
通过上述方法,我们利用React-router4的特性以及React组件的生命周期函数,成功实现了一个高效且简洁的路由监听机制,可以根据当前路由动态地更改网页标题。这种模式的优点是它充分利用了React的声明式特性,使得...
- **组件生命周期**:介绍如何利用 React Router 提供的生命周期方法来执行页面加载或卸载时的操作。 - **组件外部跳转**:通过 `Link` 组件之外的方式进行页面间的导航,例如使用 `<a>` 标签或 JavaScript。 #### ...
本项目"最简单的脚手架工具搭建的react实现路由和状态机demo"正是基于`create-react-app`创建的,它展示了如何在React应用中集成路由管理和状态管理。 首先,`create-react-app`是Facebook官方推出的用于创建React...
- **Nested Routing**:React Router 支持嵌套路由,即在某个组件内部使用`Route`来渲染子组件。这有助于构建更复杂的多层导航结构。 - **Programmatic Navigation**:通过`props.history`对象,可以编程方式改变...
本教程主要探讨的是React Router 4.x中的动态路由和GET参数传递,以及如何在React中使用`url`模块。 首先,让我们来理解动态路由的概念。在React Router中,动态路由允许我们创建可变的路径,以匹配不同参数。这...
React Router 是React生态中的一个核心组件,用于管理应用程序的页面导航和状态,使得在React应用中实现客户端路由变得简单高效。作为一个完整的路由库,它提供了丰富的功能和灵活性,帮助开发者构建复杂的单页应用...
React Router是React的路由库,它允许你在React组件之间进行导航,并且可以将URL与组件映射起来。React Router的使用可以实现SPA(单页面应用)的功能,用户在页面间切换时无需重新加载整个页面,而是只更新相应的...
首先,`react-router`是React社区广泛使用的路由管理库,它允许我们在应用中定义和管理不同的路由,实现组件的按需加载和页面间的导航。然而,`react-router`本身并不直接支持复杂的转场动画,这就是`react-router-...
在本实例中,我们将深入探讨 `react-router` 的核心概念和使用方法。 首先,React Router 提供了三种主要的路由组件:`BrowserRouter`, `HashRouter` 和 `MemoryRouter`。`BrowserRouter` 使用 HTML5 的 History ...
此外,React Router还提供了`NavLink`、`Prompt`、`Redirect`等组件以及`useHistory`、`useLocation`、`useParams`、`useRouteMatch`等hooks,用于更复杂的路由操作和状态管理。 在这个案例中,你只需替换`src`目录...
2. **React Router 4**:React Router是React社区的一个流行路由库,它允许我们在应用中实现URL与组件之间的映射。React Router 4采用了全新的API设计,强调以“路由配置”为中心。在这个音乐播放器中,它可能用于...
资源名称:React Router 中⽂⽂档 高清pdf格式内容简介:React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。这里脚本之家小编提供的是...
react-router-dom5.0的路由拦截 守卫 demo 封装好的 可以直接套用,方便研究使用,直接移植,对着修改,安装 redux等就行,免 c币 下载地址 http://download.lllomh.com/cliect/#/product/J615178556091098
React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查。 React Router是做什么的呢,官方的介绍是: A complete ...
在React.js的世界里,路由是实现页面间导航的关键技术,它允许我们根据用户的操作或URL的变化来加载...通过以上基础的使用方法,你可以构建起一个功能完备的React应用,随着需求的深入,再逐步学习和应用更高级的特性。