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

``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 (
<>

Now at Index Page(route: '/')

)
}}
/>
exact
path='/profile'
render={() => {
return (
<>

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

``