React路由
时间:2019-09-23
本文章向大家介绍React路由,主要包括React路由使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
React-router-dom
1.安装
npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令
2. 基本操作
home.js
import React from 'react'; export default class Home extends React.Component { render() { return ( <div> <a>去detail</a> </div> ) } }
detail.js
import React from 'react'; export default class Home extends React.Component { render() { return ( <div> <a>回到home</a> </div> ) } }
Router.js
import React from 'react'; import {HashRouter, Route, Switch} from 'react-router-dom'; import Home from '../home'; import Detail from '../detail'; const BasicRoute = () => ( <HashRouter> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/detail" component={Detail}/> </Switch> </HashRouter> ); export default BasicRoute;
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import Router from './router/router'; ReactDOM.render( <Router/>, document.getElementById('root') );
3.通过a标签跳转
home.js
import React from 'react'; export default class Home extends React.Component { render() { return ( <div> <a href='#/detail'>去detail</a> </div> ) } }
detail.js
import React from 'react'; export default class Home extends React.Component { render() { return ( <div> <a href='#/'>回到home</a> </div> ) } }
4. 通过函数跳转
1.首先在router.js中添加
import {HashRouter, Route, Switch, hashHistory} from 'react-router-dom'; <HashRouter history={hashHistory}>
2. 在home.js
import React from 'react'; export default class Home extends React.Component { constructor(props) { super(props); } render() { return ( <div> <a href='#/detail'>去detail</a> <button onClick={() => this.props.history.push('detail')}>通过函数跳转</button> </div> ) } }
在a标签下面添加一个按钮并加上onClick事件,通过this.props.history.push这个函数跳转到detail页面。在路由组件中加入的代码就是将history这个对象注册到组件的props中去,然后就可以在子组件中通过props调用history的push方法跳转页面。
原文地址:https://www.cnblogs.com/gdqx/p/11574454.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法