No react-router v2.4.0
ou superior e antes, v4
existem várias opções
- Adicionar função
onLeave
paraRoute
<Route
path="/home"
onEnter={ auth }
onLeave={ showConfirm }
component={ Home }
>
- Use a função
setRouteLeaveHook
paracomponentDidMount
Você pode impedir que uma transição aconteça ou avisar o usuário antes de sair de uma rota com um gancho de saída.
const Home = withRouter(
React.createClass({
componentDidMount() {
this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave)
},
routerWillLeave(nextLocation) {
// return false to prevent a transition w/o prompting the user,
// or return a string to allow the user to decide:
// return `null` or nothing to let other hooks to be executed
//
// NOTE: if you return true, other hooks will not be executed!
if (!this.state.isSaved)
return 'Your work is not saved! Are you sure you want to leave?'
},
// ...
})
)
Observe que este exemplo faz uso do withRouter
componente de ordem superior introduzido emv2.4.0.
No entanto, essa solução não funciona perfeitamente ao alterar a rota no URL manualmente
No sentido de que
- vemos a confirmação - ok
- contém da página não recarrega - ok
- URL não muda - não está bem
Para react-router v4
usar Prompt ou histórico personalizado:
No entanto react-router v4
, é bastante mais fácil de implementar com a ajuda de Prompt
from'react-router
De acordo com a documentação
Pronto
Usado para avisar o usuário antes de navegar para fora de uma página. Quando seu aplicativo entra em um estado que deve impedir o usuário de navegar (como se um formulário estivesse parcialmente preenchido), renderize a <Prompt>
.
import { Prompt } from 'react-router'
<Prompt
when={formIsHalfFilledOut}
message="Are you sure you want to leave?"
/>
mensagem: string
A mensagem a ser avisada ao usuário quando ele tenta navegar para fora.
<Prompt message="Are you sure you want to leave?"/>
mensagem: func
Será chamado com o próximo local e ação para a qual o usuário está tentando navegar. Retorne uma string para mostrar um prompt ao usuário ou true para permitir a transição.
<Prompt message={location => (
`Are you sure you want to go to ${location.pathname}?`
)}/>
quando: bool
Em vez de renderizar condicionalmente um <Prompt>
atrás de um guarda, você sempre pode renderizá-lo, mas passar when={true}
ou when={false}
impedir ou permitir a navegação de acordo.
Em seu método de renderização, você simplesmente precisa adicionar isso conforme mencionado na documentação de acordo com sua necessidade.
ATUALIZAR:
No caso de desejar ter uma ação personalizada a ser executada quando o uso estiver saindo da página, você pode usar o histórico personalizado e configurar seu roteador como
history.js
import createBrowserHistory from 'history/createBrowserHistory'
export const history = createBrowserHistory()
...
import { history } from 'path/to/history';
<Router history={history}>
<App/>
</Router>
e, em seguida, na sua componente que você pode fazer uso de history.block
como
import { history } from 'path/to/history';
class MyComponent extends React.Component {
componentDidMount() {
this.unblock = history.block(targetLocation => {
// take your action here
return false;
});
}
componentWillUnmount() {
this.unblock();
}
render() {
//component render here
}
}
componentWillUnmount() { if (confirm('Changes are saved, but not published yet. Do that now?')) { // publish and go away from a specific page } else { // do nothing and go away from a specific page } }
para que você possa chamar sua função de publicação antes de sair da página