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 basename={'/'}>
			<div>
				<h1>react-router-link-nostack Demo</h1>
				<Link to='/'>to index</Link>
				<br />
				<Link to='/profile'>to profile</Link>
			</div>
			<br />
			<Switch>
				<Route
					exact
					path='/'
					render={() => {
						return (
							<>
								<Helmet>
									<title>Index</title>
								</Helmet>
								<p>Now at Index Page(route: '/')</p>
							</>
						)
					}}
				/>
				<Route
					exact
					path='/profile'
					render={() => {
						return (
							<>
								<Helmet>
									<title>Profile</title>
								</Helmet>
								<p>Now at Profile Page(route: '/profile')</p>
							</>
						)
					}}
				/>
			</Switch>
			<p>
				try to click the same route multiple time and see it wont add to history
				stack!
			</p>
		</BrowserRouter>
	)
}

render(<Demo />, 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.

<Link
	to='/profile'
	onSamePage={() => {
		console.log('same page and wont stack history!')
	}}
>
	to profile
</Link>