š <Link/> that prevent stacking in browser history upon re-navigating current route
npm install react-router-link-nostackv5.1 or above to use this!
bash
npm i react-router-link-nostack
`
Demo
View it at GhPage!
Try it at Code Sandbox!
Usage
simply use it just like you use React Router Link
`jsx
import React from 'react'
import { render } from 'react-dom'
import Link from 'react-router-link-nostack'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import { Helmet } from 'react-helmet'
const Demo = () => {
return (
react-router-link-nostack Demo
to index
to profile
exact
path='/'
render={() => {
return (
<>
Index
Now at Index Page(route: '/')
>
)
}}
/>
exact
path='/profile'
render={() => {
return (
<>
Profile
Now at Profile Page(route: '/profile')
>
)
}}
/>
try to click the same route multiple time and see it wont add to history
stack!
)
}
render( , document.getElementById('root'))
`
API
This Link works like and has the same properties as React Router's Link, plus:
1. onSamePage(event): callback that trigger when user revisit the same page, can be undefined or null, accept event object.
`jsx
to='/profile'
onSamePage={() => {
console.log('same page and wont stack history!')
}}
>
to profile
``