react-router 4.x

什么时候使用react-router

当我们的项目存在多个页面的时候，我们可以使用像标签这样来跳转，但是提供react-router给了我们更好的选择。

react-router是什么

由于在react中，我们使用的都是组件，于是react-router也采用了这种方式，所以react-router其实提供给我们使用的都是以组件形式存在的。我们使用的时候就像我们以前使用组件那样使用就行了。如果想详细了解请参考官方文档，写的很好，建议可以看一下react-router官方文档

react-router安装

我们使用的所有的react-router组件都应该来自这个库

npm install react-router-dom

import { BrowserRouter, Route, Link... } from 'react-router-dom'

react-router基本组件

Routers(路由器组件和)

我们app的最外层必须包含一个Router,Router包括和，在web开发中，我们使用前者。而且它会为组件注入history，正是有history，才能进行一系列的路由操作，并且一个Router下面只能包含一个子节点，基于这个原因我们可以在下面使用一层

.像下面这样

ReactDOM.Render(
    
        

            // 在这里面写我们接下来的代码
        
    ，
    document.getElementById('id')
)

路由匹配( 和 )

我们可以在我们app的任何地方使用，一般我们使用它的path和component属性，路由匹配的原理是比较的path属性和当前的location的pathname，如果路由匹配该组件那么就展示它指定的组件，如果不给的path属性，那么默认是会渲染它指定组件。我们常常可以看到，在一个页面中有很多组件，根据不同的路由来展示不同的部分，像下面这样。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const BasicExample = () => (
  
    

      

        

          Home
        
        

          About
        
        

          Topics
        
      

      


      
      
    
  
);

const Home = () => (
  

    
Home
  
);

const About = () => (
  

    
About
  
);

export default BasicExample;

而是拿来对分组的,渲染的时候它会遍历内部的,直到匹配到第一个匹配的,一般在最后加上一个所有路由不匹配时展示的页面，常见的就是404。例如上面的例子中我们可以改成这个样子

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const BasicExample = () => (
  
    

      

        

          Home
        
        

          About
        
        

          Topics
        
      

      

      
          
          
          
      
    
  
);

const Home = () => (
  

    
Home
  
);

const About = () => (
  

    
About
  
);

const Default= () => (
  

    
404
  
);
export default BasicExample;

导航组件(和 和 )

就像标签，和前面的差不多, 都可以实现跳转页面，而就是实现重定向,只要匹配到它的from属性，就跳转到它的to属性指定的路由,常见的就是实现登陆的时候的重定向。