React Router v6.4 useNavigate(-1) not going back


I created a component in my project that consists of a simple button that returns to the previous page, using useNavigate hook.
As it is written in the documentation, just passing -1 as a parameter to the hook would be enough to go back one page. But nothing happens.

The component code:

import { useNavigate } from 'react-router-dom'

import './go-back.styles.scss'

const GoBack = () => {
    const navigate = useNavigate()

    const handleClick = () => {

    return (
            go back

export default GoBack

The app.js code:

import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'

import Header from '../components/header/header.component'
import Footer from '../components/footer/footer.component'
import './App.scss'

const App = () => {
  const HomePage = lazy(() => import('../pages/home/'))
  const SearchPage = lazy(() => import('../pages/search/'))
  const MostraPage = lazy(() => import('../pages/mostra/'))
  const AuthPage = lazy(() => import('../pages/auth/'))
  const AccountPage = lazy(() => import('../pages/account/'))
  const PrenotaPage = lazy(()=> import('../pages/prenota/'))
  const SectionPage = lazy(() => import('../pages/section/'))

  return (
    <div className='app'>
      <Header />
      <Suspense fallback={<span>Loading...</span>}>
          <Route exact path='/' element={<HomePage />} />  
          <Route exact path='/auth:p' element={<AuthPage />} />  
          <Route exact path='/search' element={<SearchPage />} />   
          <Route exact path='/search:id' element={<SectionPage />} />
          <Route exact path='/mostra' element={<MostraPage />} />  
          <Route exact path='/prenota' element={<PrenotaPage/>} />    
          <Route exact path='/profile' element={<AccountPage />} /> 
          <Route exact path='*' element={<span>Page not found</span>} />         
      <Footer />

export default App

The index.js code:

import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import store, { persistor } from './redux/store/store'
import App from './app/App'
import reportWebVitals from './reportWebVitals'
import { PersistGate } from 'redux-persist/integration/react'
import { BrowserRouter } from 'react-router-dom'

const container = document.getElementById('root')
const root = createRoot(container)

    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />


I thank in advance anyone who tries to help.


In the project, when rendering to another page I used the useNavigate hook and passed { replace: true } as the second parameter.

However, in this way the navigation will replace the current entry in the history stack instead of adding a new one by not then making the GoBack component work properly.

So it was enough to remove { replace: true } from the calls to useNavigate and now it works.

Answered By – Saverio Randazzo

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published