react-router-dom

react-router-dom

• 安装
  • cnpm i react-router-dom --save
• HashRouter和BrowserRouter
  • hashRouter
    • 带#号的

  import React from 'react';
  import ReactDOM from 'react-dom';

  import registerServiceWorker from './registerServiceWorker';
  import { BrowserRouter, HashRouter, Router } from 'react-router-dom';

  function home(){
    return 
Home Page
  }

  ReactDOM.render(
    // hashRouter
    
      
    
    
    //browserRouter
     
      
    
    //basename如果文件放在服务器的二级目录下则可以使用，当主页前面有一级目录calendar时，同样会显示主页的内容，通常配合Link使用
    ,document.getElementById('root')
  );
  registerServiceWorker();
    

• Route
  • Route是路由的一个原材料，它是控制路径对应显示的组件。通常使用exact、path以及component属性
  • ,exact控制匹配到/路径时不会再继续向下匹配，path标识路由的路径，component表示路径对应显示的组件
• Line和NavLink
  • 二者都可以控制路由跳转，不同点是NavLink的api更多
  • Line
    • 主要api是to，to可以接收string或者object，来控制url

• NavLink
  • 可以为当前选中的路由设置类名、样式以及回调函数等

  ReactDOM.render(
    
      

        

          

            

              home
            
            

              second
            
            

              third
            
          
        
        
        
        
      
    ,document.getElementById('root')
  );
  /* 
    >exact用于严格匹配，匹配到/则不会继续向下匹配
    >to控制跳转的路径
    >activeClassName是选中状态的类名，可以为其添加样式
    >在/second后添加1234来路由中传递消息
  */ 

• match
  • match是在使用router之后被放入props中的一个属性，在class创建的组件中通过this.props.match来获取match中的信息
  • this.props.match中存在params（对象中具有id属性），path，url等字段
• Switch
  • Switch包裹Route，里面不能放其他元素，用来只显示一个路由