react-router的基本使用

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')
}