day04-React-组件之间的通信&路由

一、父子组件之间的通信

二、子孙组件之间的通信

//Step1:在需要发送数据的一方，创建一个上下文环境的对象（context）
let context = createContext();
//返回一个对象，Consumer和Provider

//Step2：想要给哪一个后代组件传递数据，就对该组件进行包裹调用（任意后代，不是直接后代）
<context.Provider>
</context.Provider>

//Step3：接收数据

三、兄弟组件之间的通信

借助于第三方的包——pubsub
（组件挂载完成 ajax 订阅频道 操作DOM 定时器 四件事）
useEffect(()=>{} , [] )

父组件A——两个子组件B和C

import React from 'react';
import B from '../B/B'
import C from '../C/C'

export default function A() {
    return (
        <div style={{ width: 200, height: 200, backgroundColor: 'skyblue' }}>
            <h2>A</h2>
            <B></B>
            <C></C>
        </div>
    )
}

组件B

import React from 'react'
import PubSub from 'pubsub-js'

export default function B() {
    let sendMessage = () => {
    	//publish接收两个参数：第一个参数就是频道名称，第二个参数就是频道值
        PubSub.publish('message1', [1, 2, 3, 4, 5]);
    }
    return (
        <div style={{ width: 200, height: 200, backgroundColor: 'pink' }}>
            <h2>B</h2>
            <button onClick={sendMessage}>向C组件传递数据</button>
        </div>
    )
}

组件C

import React, { useEffect, useState } from 'react'
import PubSub from 'pubsub-js'

export default function C() {
	//由于状态值的默认值是一个数组
    let [msg, setMsg] = useState([]);
    useEffect(() => {
        PubSub.subscribe('message1', (msg, data) => {
            console.log('频道名称：', msg);
            console.log('频道内容：', data);
            //return中不能访问变量data，故存储在状态值中
            setMsg(data);
        })
    }, [])
    return (
        <ul style={{ width: 200, height: 200, backgroundColor: 'orange' }}>
            {
                msg.map((item, index) => {
                    return <li key={index}>{item}</li>
                })
            }
        </ul>
    )
}

单页面应用

二级路由——使用内置Hooks

//Step1:
import {  useRoutes，Navigate  } from 'react-router-dom'

//Step2：配置路由表
{
      path: '/',
      element: <Index />
    },
    {
      path: '/home',
      element: <Home />,
      //路由中的大小写敏感
      caseSensitive：true,
      //二级路由
      children: [
        {
          path: '/home/news',
          element: <News />
        },
        {
         //显示一级路由中某一条默认的二级路由
          index: true,
          element: <Navigate to="/home/news" />
        }
      ]
    },

只要放在了public文件夹中，引入link / images时，一定要写/，不能写./或者什么都不写

Link和NavLInk本质上就是a标签

写法一：路由占位符

路由后退 useNavigate() 返回一个函数，一定要调用
替换模式（基本不用）