react-router-link-nostack

react-router-link-nostack

🎈 Prevent stacking in browser history upon re-navigating current route with custom React Router Link Component.

• 0 learning curve
• out of the box memoization
• small footprint
• 0 dependency
• 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>