React Router v6.4中useNavigate(-1)无法返回上一页求助

核心问题定位 #

返回按钮无响应的主要原因是路由参数格式错误，导致路由匹配异常，进而干扰了React Router的导航历史栈记录。同时需要适配React Router v6的特性调整代码。

具体修复步骤 #

1. 修正路由参数的写法

你的路由配置里参数路径格式不符合React Router v6规范：

• 错误写法：/auth:p、/search:id
• 正确写法：/auth/:p、/search/:id
  路由参数必须以/:参数名的格式定义，缺少斜杠会被识别为普通路径字符串，无法正确匹配路由和生成导航历史记录。

2. 移除冗余的exact属性

React Router v6中Route组件默认就是精确匹配，exact属性已被移除，保留它属于无效冗余代码，建议删除。

3. 处理无历史记录的边界情况

当用户直接通过书签或链接打开某页面时，历史栈中没有上一页记录，navigate(-1)会无响应。可以在点击事件中增加判断，兜底跳转到首页。

修改后的代码示例 #

修复后的GoBack组件

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

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

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

    const handleClick = () => {
        // 判断是否存在上一页历史
        const hasHistory = window.history.length > 1;
        hasHistory ? navigate(-1) : navigate('/');
    }

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

export default GoBack

修复后的App.js路由配置

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 path='/' element={<HomePage />} />  
          <Route path='/auth/:p' element={<AuthPage />} />  
          <Route path='/search' element={<SearchPage />} />   
          <Route path='/search/:id' element={<SectionPage />} />
          <Route path='/mostra' element={<MostraPage />} />  
          <Route path='/prenota' element={<PrenotaPage/>} />    
          <Route path='/profile' element={<AccountPage />} /> 
          <Route path='*' element={<span>Page not found</span>} />         
        </Routes>
      </Suspense>
      <Footer />
    </div>
  )
}

export default App

额外验证点 #

确认GoBack组件渲染在BrowserRouter上下文范围内（从你的index.js代码来看，App已被包裹在BrowserRouter中，只要GoBack在页面组件内使用，就满足条件）。

内容的提问来源于stack exchange，提问作者Saverio Randazzo