React Router Blocker

A component same as React Router v5 prompt. Support React Router v6 all versions.

Install

pnpm

pnpm add react-router-prompt

Demo

App.tsx

import { BrowserRouter } from 'react-route-blocker'

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Dashboard />} />
    <Route path="/demo" element={<Demo />} />
  </Routes>
</BrowserRouter>

CreateProjectForm.tsx

import React, { useState } from 'react'
import RouterBlocker from 'react-route-blocker'

const CreateForm = () => {
  const [value, setValue] = useState()

  return (
    <div>
      <input placeholder="project name" value={value} onChange={e => setValue(e.target.value)} />
      <RouterBlocker
        when={isFormChanged}
        bodyRender={({ isActive, onCancel, onConfirm }) => {
          return (
            <Modal open={isActive} onCancel={onCancel} onOk={onConfirm}>
              <div>You have unsaved changes, are you sure want to leave? </div>
            </Modal>
          )
        }}
      />
    </div>
  )
}

Props

interface RouterBlocker {
  when: boolean
  bodyRender: (data: { isActive: boolean; onCancel(): void; onConfirm(): void }) => ReactNode
}