# react-router6-prompt

**Repository Path**: wkjgit/react-router6-prompt

## Basic Information

- **Project Name**: react-router6-prompt
- **Description**: 解决 react-router6 中无法实现Prompt。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2022-03-20
- **Last Updated**: 2024-11-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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


## 安装
```bash
npm install react-router6-prompt
```

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

```tsx
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功能的页面内添加
```tsx
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` 作为页面切换或卸载时的确认控件，使用后面两种则可以自定义切换或卸载时的控件控件。