[笔记] react-router-dom

1、利用Prompt组件实现路由拦截功能

<Prompt when={true} message={(location) => { return '信息还没保存，确定离开吗？' }} />

Prompt接受两个参数，一个是when，一个是message。

when是一个boolean值，默认为true，代表会进行路由拦截，拦截后的具体操作由message属性决定。when取值false时，不论message为何值，都不会阻塞路由跳转。（当有多个Prompt组件时，以最后一个when为true的组件为准）

message可能是字符串或是方法，接下来讨论一下when为true时，message的各种取值的区别：

（1）message为字符串

点击返回时，弹出confirm，内容为message，点击取消停留在当前页面，点击确定返回上一页。

（2）message为方法，且返回一个字符串

点击返回时，会执行这个方法，弹出confirm，内容为message，点击取消停留在当前页面，点击确定返回上一页。

（3）message为方法，且返回一个布尔值

返true，代表放行；返false，代表不放行。

========================================

两个应用场景：

1、挽留弹窗

const [isPrompt, setPrompt] = useState(true);

const handleBack = () => {
  Modal.confirm({
    content: '真的要离开吗？',
    onConfirm() {
      setPrompt(false)
      history.goBack()
    },
  })
  return false
}

<Prompt when={isPrompt} message={handleBack} />

2、跳转指定页面

const [isPrompt, setPrompt] = useState(true);

const handleBack = () => {
  setPrompt(false)
  setTimeout(() => {
    history.push('/list?jobFunction=120001')
  }, 0)
  return true
}

<Prompt when={isPrompt} message={handleBack} />

可能会有一些问题，谨慎使用。

2、跳转同一个页面，即使携带的参数不同，也不会触发页面刷新

使用useEffect监听页面参数变化

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

const Detail = () => {
  const { id } = useParams();

  useEffect(() => {
    // 在这里处理参数变化后的逻辑，比如重新获取数据等
    console.log(`Detail page updated with id: ${id}`);
  }, [id]);

  return (
    <div>
      <h1>Detail Page for {id}</h1>
    </div>
  );
};

export default Detail;

3、使用react-router-cache-route实现页面状态的缓存后，需要恢复数据

import { useDidCache, useDidRecover } from 'react-router-cache-route';

useDidCache(() => {
  console.log('页面被缓存时触发');
});

useDidRecover(() => {
  console.log('页面被恢复时触发');
});