React router clicks on the same link several times - reactjs

Question

Hello guys. I noticed one react-router problem while testing my project. There is a link which takes me to the product categories http://localhost:3000/category. It works fine but when I click a couple of times it looks like it takes there a couple of times as well. And when I press the go back button in Google Chrome it takes me that link again cause it was clicked on several times. How to prevent it?
import React from 'react';
import { BrowserRouter as Router,Route } from 'react-router-dom';
import { Container } from 'react-bootstrap';
import Header from './components/Header';
import Footer from './components/Footer';
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import ProductScreen from './screens/ProductScreen';
import CartScreen from './screens/CartScreen';
import ProfileScreen from './screens/ProfileScreen';
import ShippingScreen from './screens/ShippingScreen';
import PaymentScreen from './screens/PaymentScreen';
import PlaceOrderScreen from './screens/PlaceOrderScreen';
import OrderScreen from './screens/OrderScreen';
import UserListScreen from './screens/UserListScreen';
import OrderListScreen from './screens/OrderListScreen';
import UserEditScreen from './screens/UserEditScreen';
import ProductEditScreen from './screens/ProductEditScreen';
import ProductListScreen from './screens/ProductListScreen';
import Powders from './screens/categories/Powders';
import Deodorants from './screens/categories/Deodorants';
import Soaps from './screens/categories/Soaps';
import Shampoos from './screens/categories/Shampoos';
import Papers from './screens/categories/Papers';
import Category from './screens/Category';
const App = () => {
return (
<Router>
<Header/>
<main className="py-3">
<Container>
<Route path="/" component={HomeScreen} exact />
<Route path="/page/:pageNumber" component={HomeScreen} exact />
<Route path="/search/:keyword/page/:pageNumber" component={HomeScreen} />
<Route path="/search/:keyword" component={HomeScreen} exact />
<Route path="/login" component={LoginScreen} />
<Route path="/shipping" component={ShippingScreen} />
<Route path="/placeorder" component={PlaceOrderScreen} />
<Route path="/order/:id" component={OrderScreen} />
<Route path="/payment" component={PaymentScreen} />
<Route path="/register" component={RegisterScreen} />
<Route path="/profile" component={ProfileScreen} />
<Route path="/admin/userlist" component={UserListScreen} />
<Route path="/admin/orderlist" component={OrderListScreen} />
<Route path="/admin/productlist" component={ProductListScreen} exact />
<Route path="/admin/productlist/:pageNumber" component={ProductListScreen} exact />
<Route path="/admin/user/:id/edit" component={UserEditScreen} />
<Route path="/admin/product/:id/edit" component={ProductEditScreen} />
<Route path="/product/:id" component={ProductScreen} />
<Route path="/cart/:id?" component={CartScreen} />
<Route path="/category/powders" component={Powders} />
<Route path="/category/deodorants" component={Deodorants} />
<Route path="/category/soaps" component={Soaps} />
<Route path="/category/shampoos" component={Shampoos} />
<Route path="/category/papers" component={Papers} />
<Route path="/category" component={Category} exact />
</Container>
</main>
<Footer/>
</Router>
);
}
export default App;

Answer 1

Turns out this is something a lot more people have raised questions about. I have faced it a number of times myself.
my work around solution would be to use <Link > instead since that is built to act like the HTML's <a > component.
Another method would be for you to use the history.block.
import { useHistory } from "react-router-dom";
import { useEffect } from "react";
export function useLocationBlocker() {
const history = useHistory();
useEffect(
() =>
history.block(
(location, action) =>
action !== "PUSH" ||
getLocationId(location) !== getLocationId(history.location)
),
[] // eslint-disable-line react-hooks/exhaustive-deps
);
}
function getLocationId({ pathname, search, hash }) {
return pathname + (search ? "?" + search : "") + (hash ? "#" + hash : "");
}
Or this other solution here. It will just check and ensure history is not repeated (Pun intended);
props.history.listen(location => {
lastLocation = location
})
// monkey patching to prevent pushing same url into history stack
const prevHistoryPush = props.history.push
props.history.push = (pathname, state = {}) => {
if (lastLocation === null ||
pathname !== lastLocation.pathname + lastLocation.search + lastLocation.hash ||
JSON.stringify(state) !== JSON.stringify(lastLocation.state)
) {
prevHistoryPush(pathname, state)
}
}
check out this few threads for clarity and some details;
https://github.com/ReactTraining/react-router/issues/5362
https://github.com/ReactTraining/history/issues/470#issuecomment-363449663