react搭建路由

一、路由—概念：

实现spa(单页面应用)应用：整个项目只有一个完整的页面，页面切换不会刷新整个页面（不会感觉到页面闪烁，更加贴近原生应用的体验）

二、路由—分类：

1、React-Router：提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API。
2、React-Router-DOM：提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-Router-DOM。

三、路由—模式（HashRouter 和 BrowserRouter）

1、HashRouter （hash模式）
url中会有个#，例如localhost:3000/#，HashRouter就会出现这种情况，它是通过hash值来对路由进行控制。如果你使用HashRouter，你的路由就会默认有这个#。刷新不会丢失
2、BrowserRouter（历史记录模式 ）
是通过历史记录api来进行路由的切换的很多情况下我们则不是这种情况，我们不需要这个#，因为它看起来很怪，这时我们就需要用到BrowserRouter。刷新会丢失404（上线中会出现问题 本地开发中不会）

四、路由—Llink与NavLink

1、Link主要API是to，to可以接受string或者一个object，来控制url。
2、NavLink它可以为当前选中的路由设置类名、样式以及回调函数等
注：(
to属性跳转路径
activeClassName当元素处于活动状态时应用于元素的样式
)

路由基本使用

基本概念
路由最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。
在不刷新页面的情况下，根据url的不同来渲染对应不同的页面从而实现SPA单页面应用

开始使用

1.下载路由模块
npm install --save react-router-dom

2、创建用于存放路由页面的文件夹
在src下创建views文件夹，在views下创建路由页面

3.在项目根目录index.js使用路由模式包裹跟组件
import { BrowserRouter} from 'react-router-dom';
如果需要使用hash模式那就将下图的历史记录模式换乘HashRouter即可

4、创建路由规则与路由出口

4.1、设置路由规则
新建router文件，在router先index.js中配置路由规则

4.2、设置路由出口

因为刚才创建的路由文件与项目没有任何关联 所以我们需要来建立关联，需要在app.js根组件中引用使用路由文件或者直接在index.js的配置文件中直接引用路由文件

以上已经完成了最基本的路由设置 但是接下来完成路由导航 我们可以创建一个组件 在其中封装路由导航组件 然后在需要使用导航的地方调用这个组件即可

5、路由导航

NavLink
NavLink 在单纯的基础上 增加了动态类active 我们可以用来设置选中样式 修改默认选中类名 activeClassName注意：如果在vscode的终端中启动项目可能会无效 在外部cmd中启动

Link
与NavLink用法一样，但是不能动态设置类名