×

简述react-router-dom的用法

作者:andy0012020.05.25来源:Web前端之家浏览:12532评论: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前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js20200525a2.html

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

发表评论: