什么时候使用react-router

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

react-router是什么

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

react-router安装

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

npm install react-router-domimport { BrowserRouter, Route, Link... } from 'react-router-dom'

react-router基本组件

Routers(路由器组件<BrowserRouter>和<HashRouter>)

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

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

路由匹配(<Route> 和 <Switch>)

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

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;

而<Switch>是拿来对<Route>分组的,渲染的时候它会遍历内部的<Route>,直到匹配到第一个匹配的<Route>,一般在<Switch>最后加上一个所有路由不匹配时展示的页面，常见的就是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;

导航组件(<Link>和 <Redirect> 和 <NavLink>)

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