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

使用方法

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

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

• 在原来的基础上加入路由配置<HashRouter>...<HashRouter/>

<div className="App">
      <Header />
      // start
      <HashRouter>
          <Switch>
              <Route exact path="/" component={Index} />
              <Route exact path="/suc" component={Suc} />
          </Switch>
     </HashRouter>
    // end
 </div>

• 输入/或/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；

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

TIPS

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