Reaact 路由之 HashRoute 实现

HashRouter

HashRouter只是一个容器, 并没有DOm 结构,它渲染的就是它的子组件,并向下层传递location, 当hash值发生变化的时候会通过hashchange捕获变化,并给pathname重新赋值

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route, Switch, Link, Redirect,withRouter } from 'react-router-dom'
//import { HashRouter, Route, Link, Switch, Redirect } from './react-router-dom'
import App from './App';
import Home from './Home'
import User from './User'
import NavHeader from './NavHeader'
import './index.css';

ReactDOM.render(
  
    
     Home
     User
     App

    
      
      
      
      
      
    
  ,
  document.getElementById('root')
);

HashRouter的实现如下

import React, { PureComponent } from 'react'
import { Provider } from './Context'

export default class HashRouter extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            location: {
                pathname: window.location.hash.slice(1) || '',
                state: window.history.state
            }
        }
    }

    componentDidMount() {
        //如果没有hash值就给一个默认值
        window.location.hash = window.location.hash || '/'

        window.addEventListener('hashchange', () => {
            this.setState({
                ...this.state,
                location: {
                    ...this.state.location,
                    pathname: window.location.hash.slice(1)
                }
            })
        })
    }

    componentWillUnmount() {
        window.removeEventListener('hashchange')
    }

    render() {
        const value = {
            location: this.state.location,
            history: {
                push(path) {
                    window.location.hash = path
                }
            }
        }

        return (
            
                {this.props.children}
            
        )
    }
}

因为HashRouter渲染的是它的子组件,那么子组件里面有可能嵌套着二级三级路由,这个时候就需要上下文Context来读取嵌套的值,需要创建一个Context

import React from 'react'

const { Provider, Consumer } = React.createContext()

export { Provider, Consumer }

Route

route代表一条路由规则,path代表此规则的路径, component代表要渲染的组件,如果说通过Context传下来的路径location.pathname与当前属性中的路径path相匹配就进行渲染

import React, { PureComponent } from 'react'
import { pathToRegexp } from 'path-to-regexp'
import { Consumer } from './Context'

export default class Route extends PureComponent {

    render() {
        const { path, component: Component, exact = false } = this.props

        return (
            
                {state => {
                    const { pathname } = state.location

                    const regexp = pathToRegexp(pathname, [], { end: exact });

                    if (regexp.test(path)) {
                        return 
                    }
                    return null
                }}
            
        )
    }
}

Link超链接

点击某个链接跳转到指定页面,它的渲染结构就是一个a链接,href就是属性to对应的值,所以可以这么实现link方法:

import React from 'react'
import { Consumer } from './Context'

export default function Link(props) {
    return (
        
            {
                state => (
                    // eslint-disable-next-line no-template-curly-in-string
                     {
                        // 阻止默认行为
                        e.preventDefault()
                        state.history.push(props.to)
                    }}>{props.children}
                )
            }
        
    )
}

Switch

switch是为了解决route的唯一渲染,保证路由只渲染一个路径。

import React from 'react'
import { Consumer } from './Context'
import { pathToRegexp } from 'path-to-regexp'

export default function (props) {

    return (
        
            {value => {
                let children = props.children
                const { pathname } = value.location
                //判断是否是数组,如果不是就包装成数组
                children = Array.isArray(children) ? children : [children]

                for (let i = 0; i < children.length; i++) {
                    //child是一个react元素它的返回值是一个虚拟dom {type:Route,props:{exact,path,component}}
                    let child = children[i]

                    let { path = '/', exact = false } = child.props

                    let regexp = pathToRegexp(path, [], { end: exact })

                    let matched = pathname.match(regexp)
                    //若匹配进行渲染
                    if (matched) {
                        return child
                    }
                }
                //若不匹配就返回null
                return null
            }}
        
    )
}

Redirect

重定向,当所有都不匹配的时候会重定向到新的页面,就是改变path值驱动页面重新渲染。

import React from 'react'
import { Consumer } from './Context'

export default function (props) {
    return (
        
            {
                value => {
                    //当Redirect元素的props.from属性和当前location.pathname属性相等时或者from属性不存在时就直接跳转到to
                    if (!props.from || props.from === value.location.pathname) {
                        value.history.push(props.to)
                    }
                    return null
                }
            }
        
    )
}

withRouter

withRouter是一个高阶组件,它的作用是将一个自定义组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中。从而实现自定义组件的路由跳转

查看 Navheader 组件, 用 withRouter 包裹后 可以自定义路由跳转

import React from 'react'
import { withRouter } from './react-router-dom'

function Navheader(props) {
    return (
        
props.history.push('/user')} //点击的时候跳转到首页 className="navbar-brand">{props.title}
) } export default withRouter(Navheader)

withRouter 的实现:

import React from 'react'
import { Consumer } from './Context'

export default function (OldComponent) {
    function routerWrapper(props) {
        return 
            {
                value => 
            }
        
    }
    return routerWrapper;
}

代码地址 React路由实现

你可能感兴趣的:(Reaact 路由之 HashRoute 实现)