react-router（5x）

目录

路由组件和一般组件

1、路由的基本使用

 2、路由的高亮显示

 3、路由匹配模式

两种模式

4、Switch

5、Redirect 

属性

 触发条件

 6、嵌套路由

 7、路由传参

        params

        search

        state

路由找bug思路

---

路由组件和一般组件

1.写法不同：

   - 普通组件：<component />

   - 路由组件：<Route path="" component={component} />

2.开发者规范中，存放路径不同

   - 普通组件：components/xxx

   - 路由组件：pages/xxx

3.找bug方式不同：

   - 普通组件：

      - 1：导入组件路径对不对

      - 2：介绍践变量名字单词是否大写

   - 路由组件：

      - 1: 看url中路由地址

      - 2: 看注册的path与 url的路由地址是否一致

      - 3: 看component属性注册的组件对不对

4.props接收的值不同:

   - 普通组件: 自定义属性传值

   - 路由组件: 注册并渲染会自动传值

      - history

      - location

      - match

      - 记录路由地址详情详细,或者提供修改路由地址方法

1、路由的基本使用

 Link 作用：更改url中路由地址变化(path) 

Route 注册路由组件

path 作用：告诉Route 哪一个path地址，可以配置到当前注册的路由组件

component 作用：将普通的组件，注册为路由组件。

 

<Route path={'/about'} component={About} />
<Route path={'/Home'} component={Home} />

 使用注意事项：

1: 将路由组件作为 <Router /> 的子组件

2: Router 又有  

    <BrowserRouter> 为history模式的路由

    <HashRouter>    为hash模式的组件

路由开发基本思路是什么？

1：确定页面导航部分。作用：更改路由地址变化path

        <Link /> 编写导航

2：展示区域展示的内容

        path 匹配大的路由组件

        <Route /> 注册路由组件

props 

路由组件的props在测组件时候，自动传入内容  

history location match  作用：记录路由地址

 2、路由的高亮显示

1 NavLink 链接标签，作用：更改url中paht

2 编译后为a标签。当前选中 链接 会有 class=“active'

3 activeClassName 更改默认选中的类名

4 用途：实现路由的高亮显示

5:activeStyle 对象， 作用：给选中路由单独设置样式

 

 

 3、路由匹配模式

两种模式

精准匹配（exact）：必须式某个地址`/path` 才能匹配成功

模糊匹配（默认）：一某个地址 为开头的配置规则 `/^\/path*/`

 

4、Switch

Switch  在多个匹配结果中，渲染第一个Route

Route 渲染的循序与书写顺序油感

1：看匹配；多个

2：先渲染辈分高的，同辈分，按照书写顺序加载

注意：最新版本的 react-router@6 已经删除了

 

5、Redirect 

Redirect 路由重定向。

             1：检测url中path是否可以匹配的Route

                如果可以 不触发Redirect

                没有匹配到，触发Redirect 更改url中path地址

                重新匹配Route，渲染匹配到Route

              注意：书写位置，可以在任意地方使用组件,有bug

                 建议放在最后一个Route下面

              404 是兜底操作。

属性

from  作用：监听url中path（默认模糊匹配），告诉Redirict 是否重定向。

to   作用：重定向地址

   类型 string|obj

exact 精准匹配，约束from

 触发条件

1：path没有匹配到Route

2: 满足from赋值匹配条件

3：必须在Route后面写。

 6、嵌套路由

一级路由下面还有二级路由或者三级路由

 7、路由传参

        params

参数结构 `/home/list/1`

  1: 在`Route` 定义params参数的·`key`，语法`/hoem/list/:id/:title`

  2：在`NavLink Link` 中给params参数`赋值` 语法 `/home/list/1/测试`

  3：在渲染的`路由组件中` 通过 `props.match.params` 获取pramas参数

        search

 结果 `/home/list?id=1&title=测试`

1: 在`NavLink Link` 中给params参数`赋值` 语法 `/home/list?id=1&title=测试`

2: 在渲染的`路由组件中` 通过 `props.location.search` 获取search,

3: 将参数字符变为对象,在渲染参数.

        state

1: 在`NavLink Link` 中to`赋值` 对象 `{pathname,state}`

2: 在渲染的`路由组件中` 通过 `props.location.state` 获取state,

 注意:在url中没有显示参数,他是利用浏览器中history location对象实现路由传参的

路由找bug思路

样式错误：

1：看浏览器编译后的代码，解析的html css

2: 看浏览器的`/path` 与 `NavLink`的to的赋值，是否存在，

3：activeClass 赋值，在css中是否存**有效的选择器样式**

以上都没有问题：`看看是不是浏览器在解析时候丢失了样式文件。`

渲染错误：

一看，url的path

二看：Route 的 path，与url的path是否一致？

三看：Route 中componet注册组件是否存在？