×

简述react-router-dom的用法

作者:andy0012020.05.25来源:Web前端之家浏览:60评论:0

在react项目开发过程中经常会遇到,页面跳转之类的路由相关事件,为了更好的处理这些需要运用到react路由相关的一些包。

包括: react-routerreact-router-domreact-router-native

  • react-router,只实现了路由的核心功能

  • react-router-dom,基于react-router,加入了一些浏览器运行环境下的一些功能,例如:Link组件,会渲染一个a标签。BrowserRouter和HashRouter组件,前者使用pushState和popState事件构建路由,后者使用window.location.hash和hashchange事件构建路由。

  • react-router-native,基于react-router,类似react-router-dom,加入了react-native运行环境下的一些功能。

本文主要介绍react在SPA web开发中的路由,即使用react-router-dom解决的路由问题。

react-router-dom快速使用

首先在SPA web开发中,需要进行路由于页面匹配,即需要让页面与地址一一匹配起来。

import React, {Component} from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import ErrorPage from './pages/ErrorPage/ErrorPage'; //相当于404页面 
class App extends Component {
	render(){
		return (
			<Router>
				<Switch>
					<Route path='/' component={Home} exact>
					<Route path='/about' component={About}>
					<Route component={ErrorPage}>
				</Switch>
			</Router>
		);
	}
}
export default App;

其中,Route对应的就是页面,其中的path属性对应的时地址。如:http://localhost:3000时会显示Home页面,当访问http://localhost:3000/about时会访问About页面。其中的exact为严格匹配,即未添加该属性时,无论访问http://localhost:3000还是http://localhost:3000/about都会展示出Home页面内容。

可能还需要使用到导航栏

如在Home页面中存在导航栏

import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
import Style from './Home.module.css'; //在create-react-app创建的项目中这个代表css模块化,即当前css无论如何命名均不影响其他地方相同名称的结构的样式。
class Home extends Component {
	render(){
		return (
			<div>
				<NavLink
					to='/'
					className={Style.navLink}
	                activeClassName={Style.active}
                >
	                首页
				</NavLink>
				<NavLink to='/about' className={Style.navLink}>
					关于
				</NavLink>
			</div>
		);
	}
}
export default Home;

NavLink,用于设置导航链接,其中的activeClassName属性用于设置激活时匹配的样式

需要使用到普通的链接跳转

普通链接跳转直接使用Link组件,或者a标签

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
class Test extends Component {
	render (){
		return (
			<div>
				<Link to='/test'>Link跳转</Link>
				<a href='/test'>a标签跳转</a>
			</div>
		);
	}
}
export default Test;

需要使用到后退按钮

后退按钮可以使用普通按钮,并为其加上点击事。可以使用window.history.back(),或者this.props.history.goBack()

import React, {Component} from 'react';
class Test extends Component {
	constructor(props){
		super(props);
	}
	handleClick1 = ()=>{
		window.history.back();
	}
	handleClick2 = ()=>{
		this.props.history.goBack();
	}
	render (){
		return (
			<div>
				<button onClick={this.handleClick1}>button1</button>
				<button onClick={this.handleClick2}>button2</button>
			</div>
		);
	}
}
export default Test;

需要注意如果使用this.props.history.goBack()后退,组件初始化时继承父组件的props。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/js20200525a2.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2020 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.0 Valyria

时时彩平台哪个好 江苏十一选五开奖走 采30选5开奖公告 太行水泥股东大会09年股票涨跌 广西11选5投注站 七乐彩开奖结果走势图连线带坐标 今日大盘情况 下载陕西十一选五一定牛 河北20选走势图 贵州快3今日预测出号分析 乾坤商品配资 内蒙快三走势图今天走势图 体彩泳坛夺金走势图 股票行情怎么看 体彩云南十一选五 贵州快三是正规的吗 江苏11选5玩法秘籍