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

Question

我在项目中创建了一个组件，该组件由一个简单的按钮组成，该按钮使用useNavigate钩子返回到上一页。正如文档中所写的那样，只需将-1作为参数传递给钩子就足以返回一页。但什么也没发生。

组件代码：

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

apps代码：

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

index.js代码：

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()

我事先感谢任何试图提供帮助的人。

Answer 1

在项目中，当渲染到另一个页面时，我使用了useNavigation钩子，并将{ replace: true }作为第二个参数传递。

但是，通过这种方式，导航将替换历史堆栈中的当前条目，而不是通过不使GoBack组件正常工作来添加新条目。

因此，从useNavigate的调用中删除{ replace: true }就足够了，现在它可以工作了。