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

Issue

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 = () => {
        navigate(-1)
    }

    return (
        <button 
            className='go-back'
            onClick={handleClick}
        >
            go back
        </button>
    )
}

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/home.page'))
  const SearchPage = lazy(() => import('../pages/search/search.page'))
  const MostraPage = lazy(() => import('../pages/mostra/mostra.page'))
  const AuthPage = lazy(() => import('../pages/auth/auth.page'))
  const AccountPage = lazy(() => import('../pages/account/account.page'))
  const PrenotaPage = lazy(()=> import('../pages/prenota/prenota.page'))
  const SectionPage = lazy(() => import('../pages/section/section.page'))

  return (
    <div className='app'>
      <Header />
      <Suspense fallback={<span>Loading...</span>}>
        <Routes>
          <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>} />         
        </Routes>
      </Suspense>
      <Footer />
    </div>
  )
}

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)

root.render(
  <BrowserRouter>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>      
    </Provider>
  </BrowserRouter>
)

reportWebVitals()

I thank in advance anyone who tries to help.

Solution

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