使用方法
- 在入口文件（这里是
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>
相关知识
-
react-router和react-router-dom异同
-
react-router: 实现了路由的核心功能；
-
react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由；
-
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
