react路由安装与使用

react路由安装与使用

一. react路由安装

npm i react-router-dom@5.0 -S

安装完成后进入App.js中引用

• 导入路由相关组件(首字母必须大写)
• 导入哈希路由 别名router
• Route 路由页面
• NavLink 导航链接

import { HashRouter as Router, Route, NavLink} from 'react-router-dom'

• 还有很多就不接着写了，如果需要可以点击下方，查看官方文档
  链接在此

二. react路由的使用

实例：

import {HashRouter as Router , Route , NavLink} from 'react-router-dom'
function App(){
	return (<Router >
	
		{/* 导航 */}
		<div>
			{/*exact 默认显示*/}
			<NavLink to='/' exact>首页</NavLink>
			<NavLink to='/about'>关于</NavLink>
		</div>
		
		{/* 路由页面 */}
		<Route  path="/" exact component={Home}></Route >
		<Route  path="/about" component={About}></Route >
	</Router >)
}
export default App;

function Home(){
	return <div>首页页面</div>
}
function About(){
	return <div>关于页面</div>
}

这样就实现了，更新视图但不重新请求页面。如果想了解更多可以点击查看官方文档。