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>