react搭建路由

超、凢脫俗 2022-11-21 04:30 226阅读 0赞

##### 一、路由—概念： #####

实现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下创建路由页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]

**3.在项目根目录index.js使用路由模式包裹跟组件**  
`import { BrowserRouter} from 'react-router-dom';`  
如果需要使用hash模式那就将下图的历史记录模式换乘HashRouter即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]

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

**4.1、设置路由规则**  
新建router文件，在router先index.js中配置路由规则  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]  
**4.2、设置路由出口**

因为刚才创建的路由文件与项目没有任何关联 所以我们需要来建立关联，需要在app.js根组件中引用使用路由文件或者直接在index.js的配置文件中直接引用路由文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]

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

#### 5、路由导航 ####

**NavLink**  
NavLink 在单纯的基础上 增加了动态类active 我们可以用来设置选中样式 修改默认选中类名 activeClassName注意：如果在vscode的终端中启动项目可能会无效 在外部cmd中启动  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]  
**Link**  
与NavLink用法一样，但是不能动态设置类名  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/6f6e855e15a04edb9128861c77bf22e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/9f655c0ab73941ddac845eea4d9f7293.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/c954977ecd8149b6b2e896c4d76de41a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/883363c4c9c5401c8b3733130ccdab37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/34fb76a72b9a46c0b5b5749d1d3a597c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/f380059258ef424481842855064b3870.png