1001router6-react

1 一级路由

以之前讲解react-router-dom 5版本为例，做为基础使用：

第一步：安装[email protected]版本

yarn add react-router-dom 

第二步：包裹App

第三步：路由链接与注册路由，App.jsx源代码如下所示

import React, { Component } from 'react'
import { NavLink, Route, Routes } from "react-router-dom";

import About from './page/About';
import Home from './page/Home';

export default class App extends Component {
  render() {
    return (
      

        

          

            
React Router Demo
          
        
        

          

            

              About
              Home
            
          
          

            

              

                {/* 注册路由 */}
                
                  } />
                  } />
                
              
            
          
        
      
    )
  }
}

• 注册路由组件必须Routes包裹，当匹配路径匹配某个路由的时候，不在继续向下匹配。

2 Navigate

router6 重定向使用Navigate，语法如下所示:

}>

• 相当于兜底匹配，当不匹配上述所有的路由时，匹配该路由渲染to指向的路径对应的路由组件;
• to属性必须指定，表示要切换的路径；replace表示跳转模式，默认false即push模式；
• Navigate被渲染会引起视图切换。

3 NavLink 自定义高亮样式

router6中 className通过函数返回自定义样式

  function computedClassName({isActive}) {
    return isActive ? 'list-group-item g2zh' : 'list-group-item';
  }
About

• 函数参数默认传递{isActive: 布尔值}，只有当前路由链接对应的值为true.

4 useRoutes()

router6我们通过配置路由表，根据路由表通过useRoutes生成路由规则。

第一步：配置路由表，routes/index.js源代码如下所示：

import { Navigate } from "react-router-dom";

import About from '../page/About';
import Home from '../page/Home';

 const routes = [
  {
    path: '/about', 
    element:  
  },
  {
    path: '/home',
    element: 
  },
  {
    path: '/',
    element: 
  }
]

export default routes;

第二步：useRoutes()使用生成路由规则，App.jsx代码如下

import React from 'react'
import { NavLink, useRoutes } from "react-router-dom";

import routes from './routes';

export default function App() {

  // 根据路由表生成对应的路由规则
  const element = useRoutes(routes);

// ...省略

              {/* 注册路由 */}
              { element }
// 省略
}

如下图所示：

5 嵌套路由

第一步：在路由配置表中通过children,配置子路由

import { Navigate } from "react-router-dom";

import About from '../page/About';
import Home from '../page/Home';
import Message from '../page/Home/Message';
import News from '../page/Home/News';


 const routes = [
  {
    path: '/about', 
    element:  
  },
  {
    path: '/home',
    element: ,
    children: [
      {
        path: 'message',
        element: 
      },
      {
        path: 'news',
        element: 
      }
    ]
  },
  {
    path: '/',
    element: 
  }
]

export default routes;

第二步：在需要展示子路由组件地方,Home/index.jsx代码如下

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom';
export default function Home() {

  return (
    

      
我是Home的内容
      

        

          

            News
          
          

            Message
          
        
      
      {/* 指定路由组件呈现的位置 */}
      
    
  )
}

• NavLink属性to可以只指定当前路径；
• 如果不需要父组件高亮，在父路由链接NavLink 中添加属性end。

效果如下图所示：

6 路由传参

6.1 传递params参数

第一步：Meseage/index.jsx路由嵌套,传递参数改写

import React, { useState } from 'react'
import { Link, Outlet } from 'react-router-dom'

export default function Message() {
  const [messages, setMessages] = useState([
    { id: 1, title: '消息1', content: '锄禾日当午'},
    { id: 2, title: '消息2', content: '汗滴禾下土'},
    { id: 3, title: '消息3',content: '谁知盘中餐' },
    { id: 4, title: '消息4', content: '粒粒皆辛苦' }
  ])
  return (
    

      

        {
          messages.map((msg) => {
            return (
              

                {msg.title}  
              
            )
          })
        }
      
      

      
    
  )
}

第二步：配置路由routes/index.js改写如下：

// 省略...
{
    path: 'message',
    element: <Message />,
    children: [
      {
        path: 'detail/:id/:title/:content',
        element: <Detail />
      }]
  },
// 省略...

第三部 Home/Message/Detail/index.jsx接受参数

import React from 'react'
import { useParams, useMatch } from "react-router-dom";

export default function Detail() {


  const { id, title, content } = useParams();  
  // const { id, title, content } = useMatch('/home/message/detail/:id/:title/:content').params;  
  return (
    

      {/* 
ID: xxx
        
TITLE: xxx
        
CONTENT: xxx
 */}
      
ID: {id}
      
TITLE: {title}
      
CONTENT: {content}
    
  )
}

6.2 传递search参数

第一步：Meseage/index.jsx路由嵌套,传递参数改写

// 省略...
  return (
    

      

        {
          messages.map((msg) => {
            return (
              

                {msg.title}  
              
            )
          })
        }
      
      

      
    
  )
}

第二步：配置路由routes/index.js改写如下：

// 省略...
{
    path: 'message',
    element: <Message />,
    children: [
      {
       path: 'detail',
        element: <Detail />
      }]
  },
// 省略...

第三部 Home/Message/Detail/index.jsx接受参数

import React from 'react'
import { useSearchParams } from "react-router-dom";

export default function Detail() {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get('id');
  const title = searchParams.get('title');
  const content = searchParams.get('content'); 
  return (
    

      {/* 
ID: xxx
        
TITLE: xxx
        
CONTENT: xxx
 */}
      
ID: {id}
      
TITLE: {title}
      
CONTENT: {content}
    
  )
}

• useSearchParams()用法类似useState()

6.3 传递state参数

第一步：Meseage/index.jsx路由嵌套,传递参数改写

// 省略...
  return (
    

      

        {
          messages.map((msg) => {
            return (
              

                {msg.title}  
              
            )
          })
        }
      
      

      
    
  )
}

第二步：配置路由routes/index.js改写如下：

// 省略...
{
    path: 'message',
    element: <Message />,
    children: [
      {
       path: 'detail',
        element: <Detail />
      }]
  },
// 省略...

第三部 Home/Message/Detail/index.jsx接受参数

import React from 'react'
import { useLocation } from "react-router-dom";

export default function Detail() {
  const {state: {id, title, content}} = useLocation()
// ...省略

7 编程式导航

7.1 路由跳转

第一步：添加按钮事件

 showDetail(msg)}>查看详情

第二步：引入useNavigate钩子函数，实现带参跳转

import { Link, Outlet, useNavigate } from 'react-router-dom'
const navigate = useNavigate()
  
  // 查看详情
  function showDetail(msg) {
    // console.log('查看这消息的跟路吧');
    navigate('detail', {
      state: {
        id: msg.id,
        title: msg.title,
        content: msg.content
      } 
    })
  }

7.2 前进、后退

在普通组件components/Header/index.jsx代码如下

import React from 'react'
import { useNavigate } from "react-router-dom";

export default function Header() {

 const navigate =  useNavigate();

 /**
  * 前进
  */
 function forward (){
  navigate(1)
 }

 /**
  * 后退
  */
 function back () {
  navigate(-1)
 }

  return (
    

      
React Router Demo
      前进
      后退
    
  )
}

8 钩子函数

8.1 useInRouterContext()

如果组件被选择在路由上下文中，直观理解就是被包裹在中，返回true；否则返回false。

示例在App.jsx中：

import { useInRouterContext } from "react-router-dom";
console.log('---', useInRouterContext());
// 输出
--- true

8.2 useNavigationType()

• 左右返回当前路由导航的类型（用户如何来到当前页面的）。
• 返回值：POP、PUSH、REPLACE。
• 备注：POP指在浏览器中直接打开这个路由组件（刷新页面）。

示例News/index.jsx

import { useNavigationType } from "react-router-dom";
console.log('===', useNavigationType());
// 输出默认PUSH
=== PUSH
// 路由链接加上 replace 
=== REPLACE
// 直接刷新页面
=== POP

8.3 useOutlet()

• 作用：用来呈现当前组件中渲染的嵌套路由

• 示例Home/index.jsx：

  // 从根路径开始，点击Home导航
  @@ null
  // 点击子路由
  @@ {$$typeof: Symbol(react.element), type: {…}, key: null, ref: null, props: {…}, …}
  

  • 如果嵌套路由没有挂载，则为null；如果嵌套路由已挂载，则展示嵌套的路由对象。

8.4 useResolvedPath()

• 作用：给定一个URL值，解析其中的：path、search、hash值。

• 示例：

  import { useResolvedPath } from "react-router-dom";
  console.log('@@@', useResolvedPath('/news?id=1&title=abc#xxx'));
  // 输出
  {pathname: '/news', search: '?id=1&title=abc', hash: '#xxx'}
  

9 小结

1.

1. 说明： 用于包裹整个应用。

2.

1. 说明：作用与一样，但修改的是地址栏的hash值。
2. 备注：6.x版本中、 的用法与 5.x 相同。

3. 与

1. v6版本中移出了先前的，引入了新的替代者：。
2. 和 要配合使用，且必须要用包裹。
3. 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。
4. 属性用于指定：匹配时是否区分大小写（默认为 false）。
5. 当URL发生变化时， 都会查看其所有子 元素以找到最佳匹配并呈现组件 。
6. 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 组件来渲染其子路由。

4.

1. 作用: 修改URL，且不发送网络请求（路由链接）。

2. 注意: 外侧需要用或包裹。

5.

1. 作用: 与组件类似，且可实现导航的“高亮”效果。

6.

1. 作用：只要组件被渲染，就会修改路径，切换视图。

2. replace属性用于控制跳转模式（push 或 replace，默认是push）。

7.

1. 当产生嵌套时，渲染其对应的后续子路由。

3.Hooks

1. useRoutes()

1. 作用：根据路由表，动态创建和。

2. useNavigate()

1. 作用：返回一个函数用来实现编程式导航。

3. useParams()

1. 作用：回当前匹配路由的params参数，类似于5.x中的match.params。

4. useSearchParams()

1. 作用：用于读取和修改当前位置的 URL 中的查询字符串。
2. 返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。

5. useLocation()

1. 作用：获取当前 location 信息，对标5.x中的路由组件的location属性。

6. useMatch()

1. 作用：返回当前匹配信息，对标5.x中的路由组件的match属性。

7. useInRouterContext()

		作用：如果组件在 `` 的上下文中呈现，则 `useInRouterContext` 钩子返回 true，否则返回 false。

8. useNavigationType()

1. 作用：返回当前的导航类型（用户是如何来到当前页面的）。
2. 返回值：POP、PUSH、REPLACE。
3. 备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面）。

9. useOutlet()

1. 作用：用来呈现当前组件中渲染的嵌套路由。

10.useResolvedPath()

1. 作用：给定一个 URL值，解析其中的：path、search、hash值。

结语

❓QQ:806797785

⭐️源代码仓库地址：https://github.com/gaogzhen/react-staging.git

参考：

[1]React视频教程[CP/OL].2020-12-15.p127-141.

[2]React官网[CP/OL].