自己动手从头做一个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来跳转，现在，创建一个Link对象，来完成到某个url的跳转。

const Link=({to,children},{history})=>(
  {
    e.preventDefault();
    history.push(to);
  }}
  href={to}
  >
    {children}
  
)

在我们点击路由的时候发生了跳转，可是，按照上面的来做，我们在改变了某个数据之后，点击路由，没有实现实时更新，因此，需要有一个组件来完成监听url是否发生变化，如果变化了，就进行re-render。

class Router extends React.Component{
  static childContextTypes = {
    history: PropTypes.object,
    location: PropTypes.object,
  };
  constructor(props){
    super(props);
    this.history=createHistory();
    this.history.listen(()=>this.forceUpdate());
  }
  getChildContext(){
    return{
      history:this.history,
      location:window.location
    }
  }
  render(){
    return this.props.children;
  }
}

首先在构造函数里声明了history和listen去监听从而达到re-render的目的，在这里，history和location都需要进行类型检查来判断他们是否正确，在使用静态类型检查时，getChildContext是必不可少的，需要来返回需要的值，否则react脚手架就会提示需要声明getChildContext()函数。

在核心介绍完毕后，回到开始创建的两个对象，分别是Route和Link。现在，我们就对他们来添加一个类型检查。

Route.contextTypes={
  location:PropTypes.object
}

Link.contextTypes={
  history:PropTypes.object
}

接下来，我们可以声明两个对象，即我们需要显示的内容。

const Atlantic = () => (
  

    
A
    

      A样例
    
  
);

const Pacific = () => (
  

    
P
    

      P样例
    
  
);

现在，我们将两个对象放到我们创建的Router对象中(注意，不是第一个创建的Route对象)。

const App=()=>(
  
    

        

          

            
              /atlantic
            
          
          

            
              /pacific
            
          
        

        


        
        

      
  
)

在上图中，我们用到了之前创建的所有对象，Router,Link,Route。将所有需要显示的内容放到Router视图当中，Link达到我们需要跳转的目的，而Route就是我们需要显示的相应的组件了。

结果如下: