React路由基础、使用与执行

React路由基础、使用与执行

接下来我们将会介绍React路由的基本使用方法，以及什么是默认路由，路由是怎么实现跳转的，他们是如何进行匹配的。

1、React路由基础：

现代前端应用大都是SPA，那么什么是SPA呢？

SPA就是单页应用程序，他的优点是用户体验好、服务器压力小，但是我们要把很多内容放在一个页面上，为了有效使用单个页面管理原来多页面的功能，前端路由应运而生。

前端路由实现功能：从一个页面到另一个页面

映射规则：URL路径和组件对应功能（配置路径和组件配对）

2、路由的基本使用:

1）安装react-router-dom

2）导入路由核心组件（当然我们要按需导入）

BrowserRouter as Router(Router就是BrowserRouter的别名) Route Link

3）使用React组件包裹整个应用(重要)

4）使用Link组件作为导航菜单(路由入口)，会被编译成a标签

<Link to="/first">页面1</Link>

5）使用Route组件配置路由规则和要展示的组件(路由出口)

<Route path="/first(和路由入口匹配)" component={
          
   要展示的组件的名}></Route>

但是我们的内容展示在哪呢？Route写在哪就把内容渲染在哪

3、路由执行过程：

1）点击Link组件，修改浏览器地址栏URL 2）React路由监听到地址栏变化 3）React路由遍历所有Route组件，使用路由规则path与pathname匹配 4）当匹配成功就展示Route组件内容

编程式导航：通过JS代码实现页面的跳转

4、默认路由：

进入页面就会展示的路由，进入页面就会被匹配到展示 。

<Route path=/>

5、路由匹配模式：

1）模糊匹配模式：

a）”/“所有pathname都可以被匹配

b）只要pathname是以path开头的都会匹配成功

c）pathname指得是Link组件中to属性的值

d）path指的是Route组件中path属性的值

2）精确匹配

a）给Route组件添加exact属性，让其变成精确匹配

b）只有pathname和name完全相同才会被展示

总结：React路由的一切都是组件、我们可以像思考组件一样去思考路由