React路由学习(二)

版权声明： https://blog.csdn.net/weixin_33768153/article/details/82413993

之前我们实现了简单的路由,现在我们在之前的基础上实现正则匹配路由,

我们这里需要依赖path-to-regexp模块

// 安装模块
npm install path-to-regexp --save

react-router-dom目录里文件内容

• Router.js内容

这里时所有的路由模板,我们要根据父组件传递过来的路由进行匹配,并将匹配到的结果返回出去

// 我们这里拿到父组见传递的数据,然后进行判断,将符合规则的模板返回
import React, {Component} from 'react';
import {Consumer} from './context'

// 需要使用的模块 // 新增
let PathToReg = require('path-to-regexp') // 新增
export default class Route extends Component{
    render () {
        return (
            <Consumer>
                {
                    // value就是我们在HashRouter文件中Provider组件中传递的value值,
                    // value = state.locaton
                    value => {
                        let {location: {pathname}} = value // 拿到hash 进行比较
                        // 拿到传入的path，组件，并手动大写(组件需要首字母大写)
                        let {path, component: Component} = this.props

                        let keys = [] // 新增 
                        let reg = PathToReg(path, keys, {end: exact}) // 新增
                        // 如果路径相同,则返回这个模板
                         // 使用reg处理路由
                        if (reg.test(pathname)) { // 修改
                            return <Component></Component>
                        } else {
                            return null
                        }
                    }
                }
            </Consumer>
        )
    }
}

总结

通过以上简单的几句话,我们就是实现了正则匹配路由,下面我们将实现Link组件