# React路由基礎 ## 三個常用的組件 > HashRouter/BrowserRouter Link Route ## BrowserRouter 或 HashRouter > 開啟路由世界的大門 路由的根地址，只能擁有一次 > 。一個是HashRouter另一個就是HistoryAPI路由 ## Link > 和vue的 link 是一樣的 有to屬性是跳轉到哪個頁面 > **exact**表示嚴格（路由導航定位會講到） ## Route 屬性 > path component exact(在路由嚴格模式會講) 作用 > 1. 路由的匹配規則 > 2. 占位顯示 # 案例 ## 安裝路由npm包 `npm install react-router-dom -S` ## 效果  ## 準備工作 1.我們要先準備三個頁面其實就是三個組件首頁，關于，新聞`src/pages/Home.js; src/pages/About.js; src/pages/News.js;`這三個組件。 2.在入口main.js中使用路由 ``` import React from 'react' import ReactDom from 'react-dom' import {HashRouter, Route, BrowserRouter, Link} from "react-router-dom"; import Home from "./pages/Home"; import About from "./pages/About"; import News from "./pages/News"; ReactDom.render( // 開啟路由世界的大門 路由的根地址，只能擁有一次 <HashRouter> {/*導航 Link Vue的用法很相似 注意這里是大寫*/} <Link to={"/home"}>首頁</Link> <Link to={"/about"}>關于</Link> <Link to={"/news"}>新聞</Link> <hr/> {/*路由指向哪個頁面 （組件）有兩個意義 定義路由指向 在哪個位置顯示頁面*/} <Route path={'/home'} component={Home}/> <Route path={'/about'} component={About}/> <Route path={'/news'} component={News}/> </HashRouter> , document.getElementById('root')) ``` # 總結 我們發現React 和Vue 是有不同的。在定義路由時Route 有兩種作用**一是占位顯示 二是定義路由**。其它思想和Vue差不太多。