# 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差不太多。