react-router6-prompt
v1.1.0
Published
为react-router6附加prompt功能
Downloads
22
Maintainers
Readme
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
作为页面切换或卸载时的确认控件,使用后面两种则可以自定义切换或卸载时的控件控件。