react-router-link-nostack
🎈 Prevent stacking in browser history upon re-navigating current route with custom React Router Link Component.
🌟 almost 0 learning curve.
🔔 0 dependency.
⛲️ Out of box typescript support.
🦺 Tested.
Note: You need React Router v5.1
or above to use this!
Installation
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
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 <BrowserRouter => <div> <h1>react-router-link-nostack Demo</h1> <Link ='/'>to index</Link> <br /> <Link ='/profile'>to profile</Link> </div> <br /> <Switch> <Route ='/' = /> <Route ='/profile' = /> </Switch> <p> try to click the same route multiple time and see it wont add to history stack! </p> </BrowserRouter>
API
This Link
works like and has the same properties as React Router's Link, plus:
onSamePage(event)
: callback that trigger when user revisit the same page, can be undefined or null, accept event object.
<Link ='/profile' => to profile</Link>