React-router

BaronZhang 发布于2019-08-23 10:31 / 2350人阅读

摘要：依赖于一概念理解痛点界面需要导航，需要根据不同的导航加载不同的模块需要处理的问题地址栏按需加载不同的模块适当进行个性化处理其实，上面两个问题，并不难处理，但是本着抽象的原则，需要抽象出一个通用的模块。提供了一个良好的机制进行处理。

React-router依赖于：history

一、概念理解

痛点：界面需要导航，需要根据不同的导航加载不同的模块
需要处理的问题：
1、URL地址栏
2、按需加载不同的模块（适当进行个性化处理）
其实，上面两个问题，并不难处理，但是本着抽象的原则，需要抽象出一个通用的模块。
React-router提供了一个良好的机制进行处理。

二、简单Demo

三、源码解析 1、Router和Route

Route：匹配路径，并进行渲染

//代码是部分代码模块，如果想看真的源码，移步github
class Route extends React.Component(){
    constructor(){
        this.state={
            match:this.computeMatch(this.props, this.context.router)
        }
    }
    //这部分的目的主要是让大家了解下源码中需要输入的参数和类型
    static propTypes = {
        computedMatch: PropTypes.object, // private, from 
        path: PropTypes.string,
        exact: PropTypes.bool,
        strict: PropTypes.bool,
        sensitive: PropTypes.bool,
        component: PropTypes.func,
        render: PropTypes.func,
        children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
        location: PropTypes.object
    };
    //每次路由发生变化，就进行重新渲染
    componentWillReceiveProps(nextProps,nextContext){
        this.setState({
            match: this.computeMatch(nextProps, nextContext.router)
        });
    }
    render(){
        //返回
            if (component) return match ? React.createElement(component, props) : null;

    }
}

Router：把history放入全局的context里面

class Router extends React.Component {
    //输入参数多了history
    static propTypes = {
        history: PropTypes.object.isRequired,
        children: PropTypes.node
    };
    //大部分都一样，render返回不一样
    render() {
        const { children } = this.props;
        return children ? React.Children.only(children) : null;
      }
}

2、Switch、Redirect

//switch核心模块
    let match, child;
    React.Children.forEach(children, element => {
      if (match == null && React.isValidElement(element)) {
        const {
          path: pathProp,
          exact,
          strict,
          sensitive,
          from
        } = element.props;
        const path = pathProp || from;

        child = element;
        match = matchPath(
          location.pathname,
          { path, exact, strict, sensitive },
          route.match
        );
      }
    });

    return match
      ? React.cloneElement(child, { location, computedMatch: match })
      : null;
      
//Redirect核心模块
componentDidUpdate(prevProps) {
    const prevTo = createLocation(prevProps.to);
    const nextTo = createLocation(this.props.to);
    this.perform();
  }

  computeTo({ computedMatch, to }) {
    if (computedMatch) {
      if (typeof to === "string") {
        return generatePath(to, computedMatch.params);
      } else {
        return {
          ...to,
          pathname: generatePath(to.pathname, computedMatch.params)
        };
      }
    }

    return to;
  }

  perform() {
    const { history } = this.context.router;
    const { push } = this.props;
    const to = this.computeTo(this.props);

    if (push) {
      history.push(to);
    } else {
      history.replace(to);
    }
  }

3、HashRouter、BrowserRouter：以Router为基础

//HashRouter源码很简单
import { createHashHistory as createHistory } from "history";

class HashRouter extends React.Component {
  static propTypes = {
    basename: PropTypes.string,
    getUserConfirmation: PropTypes.func,
    hashType: PropTypes.oneOf(["hashbang", "noslash", "slash"]),
    children: PropTypes.node
  };

  history = createHistory(this.props);

  render() {
    return ;
  }
}

//BrowserRouter源码也很简单
import { createBrowserHistory as createHistory } from "history";

class BrowserRouter extends React.Component {
  static propTypes = {
    basename: PropTypes.string,
    forceRefresh: PropTypes.bool,
    getUserConfirmation: PropTypes.func,
    keyLength: PropTypes.number,
    children: PropTypes.node
  };

  history = createHistory(this.props);

  render() {
    return ;
  }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96428.html

react-router 升级小记

摘要：前言最近将公司项目的从版本升到了版本，跟完全不兼容，是一次彻底的重写。升级过程中踩了不少的坑，也有一些值得分享的点。没有就会匹配所有路由最后不得不说升级很困难，坑也很多。前言最近将公司项目的 react-router 从 v3 版本升到了 v4 版本，react-router v4 跟 v3 完全不兼容，是一次彻底的重写。这也给升级造成了极大的困难，与其说升级不如说是对 route...

isLishude 2019-08-21 18:30 评论0 收藏0
ReactRouter升级 v2 to v4

摘要：概述相对于几乎是重写了新版的更偏向于组件化。汲取了很多思想，路由即是组件，使路由更具声明式，且方便组合。如果你习惯使用，那么一定会很快上手新版的。被一分为三。不止是否有意义参考资料迁移到关注点官方文档概述 react-router V4 相对于react-router V2 or V3 几乎是重写了, 新版的react-router更偏向于组件化(everything is comp...

JasonZhang 2019-08-20 17:26 评论0 收藏0
React-Router实现原理，解决了什么问题？

摘要：解决了什么问题首先，它搭配组件，可以组织组件结构代码，授权路由的控制。有两种方式核心的各自做了什么事首先它们都是基于构建，也就是的组件的路由，至于各自做了什么。去看官方文档，里面描述了每一个组件路由做了什么事。 React-Router解决了什么问题？首先，它搭配React组件，可以组织React组件结构代码，授权路由的控制。应该展示什么样的组件，通过React-Router去匹配它...

kgbook 2019-08-23 17:15 评论0 收藏0
[ 一起学React系列 -- 11 ] React-Router4 (1)

摘要：中的包中的包主要有三个和。的理念上面提到的理念是一切皆组件以下统一称组件。从这点来说的确方便了不少，也迎合一切皆组件的理念。组件是中主要的组成单位，可以认为是或的路由入口。将该标示为严格匹配路由。的属性追加一条。 2019年不知不觉已经过去19天了，有没有给自己做个总结？有没有给明年做个计划？当然笔者已经做好了明年的工作、学习计划；同时也包括该系列博客剩下的博文计划，目前还剩4篇：分别...

tinysun1234 2019-08-23 14:49 评论0 收藏0
前端路由实现与 react-router 源码分析

摘要：回调函数将在更新时触发，回调中的起到了新的的作用。注册回调在中使用注册的回调函数，最终放在模块的回调函数数组中。原文地址：https://github.com/joeyguo/blog/issues/2 在单页应用上，前端路由并不陌生。很多前端框架也会有独立开发或推荐配套使用的路由系统。那么，当我们在谈前端路由的时候，还可以谈些什么？本文将简要分析并实现一个的前端路由，并对 reac...

ISherry 2019-08-19 18:22 评论0 收藏0
从路由原理出发，深入阅读理解react-router 4.0的源码

摘要：通过前端路由可以实现单页应用本文首先从前端路由的原理出发，详细介绍了前端路由原理的变迁。接着从的源码出发，深入理解是如何实现前端路由的。执行上述的赋值后，页面的发生改变。 react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现...

Miyang 2019-08-23 12:01 评论0 收藏0