react-router-link-nostack v1.0.12
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:
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>
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago