自己动手从头做一个react路由

本案例用的是create-react-app脚手架生产的demo,在创建好后需要安装history模块和prop-types模块。

npm install history --save

npm install prop-types

history主要是需要来制作前进后退相关的步骤，而prop-types则是基本的类型检查。

安装以上两个模块后就开始制作react的路由。

首先，路由最主要的就是url,不管是react还是vue都是一样，在我们点击某个链接的时候，浏览器并没有重新加载页面，而是改变了url,同时，无闪烁的展示我们需要的内容。

首先，声明一个路由对象，来处理url相关的操作。

const Route = ({ path, component }, { location }) => {
  const pathname = location.pathname;
  if (pathname.match(path)) {
    return (
      React.createElement(component)
    );
  } else {
    return null;
  }
};

在上图中，声明了两个对象，分别有三个参数，是路径，组件，以及一个location，关键步骤就是获取url,然后进行匹配，如果点击链接的url与获得的url相匹配的话，就创建组件元素。

有了url的变化，还需要有一个link来跳转，现在，创建一