使用react-router-dom路由 | react入门记录（二）

使用方法

• 在入口文件（这里是index.js）中加入如下代码

import { HashRouter, Route, Switch }from 'react-router-dom';

• 在原来的基础上加入路由配置...

      

      // start
      
          
              
              
          
     
    // end
 

• 输入/或/suc即可切换不同的页面

相关知识

• react-router和react-router-dom异同

1. react-router: 实现了路由的核心功能；
2. react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由；
3. react-router-dom依赖react-router；

• 
  使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步；
• 
  使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步；
• 
  用于渲染与路径匹配的第一个子 或 。它的独特之处是独它仅仅渲染一个路由。相反地，每一个包含匹配地址(location)的都会被渲染。
  寻找到匹配的之后将停止寻找匹配并渲染该。
• exact
  精准匹配。如果为 true，则只有在位置完全匹配时才应用激活类/样式。
  例如在开始到例子中，只有/suc才会匹配成功，/suc/test则不会。

TIPS

• <...Router>组件下只能有一个根目录