初探react-router v4

基本组件

React Router中有三种类型的组件：路由器组件，路由匹配组件和导航组件

路由器组件

对于Web项目，react-router-dom提供和路由器。

两者区别：

地址栏： BrowserRouter地址栏显示方式：http://localhost:8080/abc/def,HashRouter地址栏显示方式：http://localhost:8080/#/abc/def
需要server端的配合，每一次跳转页面都向服务器发送一次请求，服务器需要进行处理
不会向服务器发起请求，会找到相对于的模块然后进行渲染
个人觉得如果是静态页面，使用就好

使用：
需要在服务器接受路由，然后返回文件(以node后台为例)

app.get('*',(request,response)=>{

  response.sendFile(path.resolve(__dirname,'../index.html'))

})

使用：

import { HashRouter as Router, Route } from 'react-router-dom'
import Home from './views/home'

路由匹配组件和

可对子元素进行分组，并仅渲染与当前位置匹配的第一个元素

如果匹配到对应的path将会渲染对应组件，如果没有匹配到，则返回null，如果不设置path属性，将会一直渲染
使用：

import About from './views/about'
import Home from './views/home'
import Services from './views/services'

public render():JSX.Element {
  return (
    
      
        {/* 当路由为 " / " 时 */}
        {/* Home组件将会被渲染 */}
        
        {/* About不会渲染，返回null */}
        
        {/*上面都不匹配将会渲染Services组件 */}
        
      
    
  )
}

渲染方式：`component`，`render`，和`children`。

使用：

import About from './views/about'
import Home from './views/home'
import Services from './views/services'

const AboutCom = (props:any) => {
  return (
    
  )
}

class App extends React.Component {
  public render():JSX.Element {
    return (
      
        
          {/* 使用component渲染 */}
          
          {/* 使用render渲染 */}
          
          {/* 使用children渲染 */}
          
        
      
    )
  }
}

重定向

将导航到新的位置，且新位置会覆盖历史堆栈中的位置


  
    
    
    
    {/* 当地址为：ip::3000/#/anywhere都将跳转到Home页面 */}

路径(path)


// 当路径名为'/'时, path不匹配
// 当路径名为'/roster'或'/roster/2'时, path匹配
// 当你只想匹配'/roster'时，你需要使用"exact"参数, 路由仅匹配'/roster'而不会匹配'/roster/2'

嵌套路由

在以前的版本中可以使用以下:

但是在4.0版本之后就和之前的版本不一样了,详见;react-router官网

路由传参

配置路由
跳转传参
- 1.传入string:跳转传递字符串
- 2.传入Object:跳转传递对象
User页面获取
- 1.传入string时获取方式：this.props.match.params.id
- 2.传入Object时获取方式： this.props.location

1.这里的id和路由中的/user/:id一样，如果路由为 /user/:userId，则获取 this.props.match.params.userId;2.如果参数是对象，则存在this.props.location中

异步加载方案

安装Loadable

yarn add react-loadable

简单封装一次

在router/index.tsx引入使用:

import * as React from 'react'
import * as Loadable from 'react-loadable'

interface IRoute {
    component: Promise | React.StatelessComponent | { default: React.ComponentType }>,
    path: string
}

export const route:IRoute[] = [
    {
        component: import('../views/Support'),
        path: '/support'
    },
    {
        component: import('../views/About'),
        path: '/about'
    },
    {
        component: import('../views/Services'),
        path: '/services'
    }
]

function Loading(props: any) {
    console.log(props)
    if (props.error) {
        return Error!
    } else if (props.timedOut) {
        return Taking a long time...
    } else if (props.pastDelay) {
        return loading
    } else {
        return loading
    }
}

export const loadable = (component: Promise | React.StatelessComponent | { default: React.ComponentType }>) => {
     return Loadable({
        delay: 200,
        loader: () => component,
        loading: Loading,
        timeout: 10000,
    })
}

调用

在定义路由的地方调用:

import * as React from 'react'
import { Route, Switch } from 'react-router-dom'
import Nav from '../../component/nav'
import { loadable, route } from '../../routes'

interface IRouteItem {
    component: Promise | React.StatelessComponent | { default: React.ComponentType }>,
    path: string
}

export default class Home extends React.Component {
    public render ():JSX.Element {
        return (
            
                
                
                    {route.map((item:IRouteItem, index:number) => {
                        return (
                            
                        )
                    })}
                
            
        )
    }
}

Webpack配置Less css加载器

1.安装less相关依赖

这是不可逆的操作，它将create-react-app的配置反编译到当前项目，从而完全取得 webpack 文件的控制权，无法回到原来的项目版本！

自己在使用的时候，它提示让我提交了代码再使用这命令，应该是想让我保存当前版本吧。-.-
yarn eject 这个命令详见：这里

2.安装less相关依赖

npm install less less-loader --save-dev

3.配置`webpack.config.dev.js`和`webpack.config.prod.js`文件(做相同配置)

找到 css-loader所在位置
修改css的test正则为/\.(css|less)$/,
在use中添加less-loader

{
    loader: require.resolve('less-loader'),
    options: {
      importLoaders: 1
    }
}

找到exclude，在末尾添加/\.(css|less)$/