react-router

项目基于官方脚手架create-react-app
构建项目

npx create-react-app react-router-learn && cd react-router-learn && npm i react-router-dom && npm start

npx官网

1. 路由容器

react-router-dom提供和(更适合静态资源)路由器

2. 路由匹配组件

由和组成

2.1

用于匹配path的属性值的路由，不匹配时将为null
app.js

import React, { Component } from 'react'
import { BrowserRouter as Router } from "react-router-dom"
import Routers from './router'

class App extends Component {
  render() {
    return (
      
        
      
    );
  }
}

// router.js

import { Route, Link, Switch } from "react-router-dom"
import React, { Component } from 'react'
import { Button } from 'antd'

import Home from './views/home/home'
import About from './views/about/about'
import Login from './views/login/login'

class Routers extends Component {
  render() {
    return 

        
        
        
        
    
  }
}

const TabBar = () => (
  

    
      Home
    
    
      About
    
    
      Login
    
  
)

export default Routers

2.2

通常与 嵌套组合使用，只会渲染匹配的第一个对应的路由组件，其它则根据实际情况处理（比如没用匹配的路径，则渲染404组件）
修改router.js如下

import NoMatch from './views/noMatch/noMatch'

class Routers extends Component {
  render() {
    return 

        +++ 
          
          
          
           +++ 
         +++ 
        
    
  }
}

const TabBar = () => (
  ...
    +++ 
     +++  NoMatch 
    +++ 
  ...

点击登录则会出现

404页面

3. 路由懒加载

安装@babel/plugin-syntax-dynamic-import(使用了Babel的原因不采用webpack自带的动态导入
)和react-loadable（加载动态导入的组件）

npm i -D @babel/plugin-syntax-dynamic-import && npm i react-loadable

首先配置@babel/plugin-syntax-dynamic-import，在package.json里找到babel添加"@babel/plugin-syntax-dynamic-import"

  [
     "plugins": ["@babel/plugin-syntax-dynamic-import"] 
 ]

router.js修改如下

import { Route, Link, Switch } from "react-router-dom";
import React, { Component } from 'react';
import { Button } from 'antd';
// 引入react-loadable
import Loadable from 'react-loadable';
import Loading from './Loading';

// 封装获取路由组件，此处有坑，import不要传个变量，尽可能处理为一个固定路径+组件路径，比如
// loading组件不需要可传入一个返回值为null的回调函数，loading: () => null
import(`./views${componentName }`)，否则报Critical dependency: the request of a dependency is an expression。
function getRouter(path, loading = Loading) {
  let component = Loadable({
    loader: () => import(`./views/${path}`),
    loading
  });
  return component
}

class Routers extends Component {

  render() {
    return 

      
        
        
        
        
      
      
    
  }
}

const TabBar = () => (
  

    
      Home
    
    
      About
    
    
      Login
    
    
      Login
    
  
)
export default Routers

ant design