react-router

react-router

React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。

react-router-dom

React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。

安装

npm install react-router-dom --save

react-router-dom存在与两种组件，当存在服务区来管理动态请求时，需要使用组件，而被用于静态网站。这里，我们选择

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

ReactDom.render(
    
        
            

                

                    home
                
                

                    A
                
                

                    B
                
            
              
               
                
        
    ,
    document.getElementById('root')
)

match

match是在使用router之后被放入props中的一个属性，在class创建的组件中我们需要通过this.props.match来获取match之中的信息。

class Test extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        console.log(this.props)
        return 
测试组件
    }
}
ReactDom.render(
    
        
            

                

                    

                        home
                    
                    

                        A
                    
                    

                        B
                    
                
                
            
   
        
    ,
    document.getElementById('root')
)

match中包含的信息如下。

image.png

Redirect

无论何时你要重定向到另外一个地址的时候，都可以使用Redirect组件

Switch

只命中第一个路由