react-router6-prompt

react-router6-prompt

由于目前react-router6中仍未支持 Prompt，但是在有些时候不得不使用此功能，所以此模块，仅实现此功能仅此而已。

安装

npm install react-router6-prompt

使用

首先导入Router，包括 BrowserRouter 和 HashRouter 两种模式。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// 使用HashRouter，同样的方法导入即可
import {BrowserRouter} from 'react-router-prompt';

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
)

在需要使用Prompt功能的页面内添加

import React from 'react';
import {browserHistory, Prompt} from 'react-router6-prompt';
// 如果使用的是HashRouter，这里引入hashHistory即可。

const Page = () => {
    return (
        <>
            <Prompt history={browserHistory} when={true} message={() => {
                return true;
            }}>
        </Prompt>
    );
}

export default Page;

关于Prompt组件

在使用 Prompt 组件时，该组件有三个prop参数:

• history ，支持 browserHistory 和hashHistory。
• when ，boolean，设置是否开启页面切换或卸载效验。
• message ，string 、 () => boolean 、() => Promise<boolean> 支持三种类型，使用 string 作为参数则使用浏览器默认的 confirm 作为页面切换或卸载时的确认控件，使用后面两种则可以自定义切换或卸载时的控件控件。