react-router的基本使用
1. 第一步当然是安装.
- 使用npm安装
npm Install react-router-dom
- 使用yarn安装
yarn add react-router-dom
2. 第二步就是导入.
// 有两种url格式: BroswerRouter, 原型为h5的history模式, 路径中不带有`#`
// HashRouter ,使用hash模式, 路径中带有 `#`, 两者比较常用BroswerRouter.
import {
BroswerRouter as Router, Route, Link, NavLink } from 'react-router-dom'
- tips: 使用
BroswerRouter的路径看起来更加简洁, 更像是一个URL. 和vue中router中, 设置mode: ‘history’一样(尤大推荐!!)
3. 第三步为使用.
- Router、Router、Link的使用:
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
<Link to="/profile">我的</Link>
// exact为精准配置, 只有路径完全一致, 才会跳转.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</BrowserRouter>
)
}
}
tips: Router中包含: Link、Route, 其中Link表示路径, Route表示路径对应的组件, 这样通过点击Link跳转到对应的页面.
- Router、Route、NavLink的使用:
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<NavLink to="/" activeStyle={
{
color: "red"}}>首页</NavLink>
<NavLink to="/about" activeStyle={
{
color: "red"}}>关于</NavLink>
<NavLink to="/profile" activeStyle={
{
color: "red"}}>我的</NavLink>
// exact为精准配置, 只有路径完全一致, 才会跳转.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</BrowserRouter>
)
}
}
tips: NavLink相对于Link多了activeClassName、activeStyle属性, 其中NavLink默认激活的类为active, 如果你怕混淆, 那么可以使用自定义类名
<NavLink to="/" activeStyle={
{
color: "red"}} activeClassName='link-active'>首页</NavLink>
tips: 如果你点击任何一个路径发现都是激活状态, 那么你需要在 /根目录的route中添加 exact进行精准匹配.
- Switch、Router、Route、
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<NavLink to="/" activeStyle={
{
color: "red"}}>首页</NavLink>
<NavLink to="/about" activeStyle={
{
color: "red"}}>关于</NavLink>
<NavLink to="/profile" activeStyle={
{
color: "red"}}>我的</NavLink>
<Switch>
// 加上switch后, 匹配到第一个后, 就不会往后配置, 这样就不会出现, 有路径在其中就被渲染.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</Switch>
</BrowserRouter>
)
}
}
tips: Switch标签添加在Route上, 可以使匹配到唯一的一个Route.
Redirect的使用:
user.info ? show(userInfo): <Redirect to: '/login'>
tips: 如果有用户信息, 直接登录, 否则跳转到登录页面进行登录操作.
多层路由:
// 挑战到cart购物车下的shopInfo商品信息页面
<Route path="/cart/shopInfo" component={
About} />
编程式路由:
// 页面中的跳转点击函数
<button onClick= {
this.toCart}>跳转到购物车</button>
// 函数中的跳转点击函数定义
toCart() {
// 这是跳转到cart, 保留当前页.
this.props.history.push('/cart')
//这是替换为cart, 当前页被cart替换了.
this.props.history.replace('/cart')
}