如何正确使用返回按钮？react-router-last-location路由返回异常咨询

嘿，我猜你遇到的情况应该是：从/card/64531再次点击返回按钮时，路由没有回到预期的/cards，反而直接跳回主页/了对吧？这在使用react-router-last-location处理嵌套路由时是个挺常见的坑，我之前也碰到过类似的情况，来给你分享几个可行的解决方案：

1. 给lastLocation加过滤规则，忽略嵌套路由内部跳转 #

问题根源在于react-router-last-location默认会记录每一次路由变更，包括嵌套路由的切换（比如从/card/:id到/card/:id/info），这会把之前从/cards到/card/:id的记录给覆盖掉。我们可以通过配置过滤规则，让它只关心跨层级的路由跳转：

import { LastLocationProvider } from 'react-router-last-location';

function App() {
  return (
    <LastLocationProvider
      filter={(location) => {
        // 用正则匹配：只保留主页、卡片列表页，以及卡片详情根页，排除详情页的子路由
        const isAllowedRoute = 
          location.pathname === '/' || 
          location.pathname === '/cards' || 
          /^\/card\/[^\/]+$/.test(location.pathname);
        return isAllowedRoute;
      }}
    >
      {/* 你的路由组件 */}
    </LastLocationProvider>
  );
}

这样配置后，lastLocation就只会记录/→/cards→/card/64531这几次跳转，从/card/64531/info返回时先回到/card/64531，再点返回就会回到/cards了。

2. 自定义返回逻辑，手动控制跳转路径 #

如果过滤规则不够灵活，你可以写个自定义Hook来手动处理返回逻辑，针对性更强：

import { useLocation, useNavigate } from 'react-router-dom';
import { useLastLocation } from 'react-router-last-location';

function useCustomGoBack() {
  const navigate = useNavigate();
  const lastLocation = useLastLocation();
  const currentPath = useLocation().pathname;

  const handleGoBack = () => {
    // 如果当前在详情页的子路由（比如/info），先跳回详情根页
    if (currentPath.includes('/info')) {
      navigate(-1);
    } 
    // 如果有有效的上一页记录，跳过去
    else if (lastLocation) {
      navigate(lastLocation.pathname);
    } 
    // 兜底回到主页
    else {
      navigate('/');
    }
  };

  return handleGoBack;
}

然后在你的返回按钮里直接用这个Hook：

function BackButton() {
  const goBack = useCustomGoBack();
  return <button onClick={goBack}>返回</button>;
}

3. 检查路由配置，确保嵌套路由正确设置 #

另外，如果你其实不需要react-router-last-location的额外功能，可能只是路由配置的问题。确保/card/:id/info是作为/card/:id的子路由存在的：

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

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/cards" element={<Cards />} />
      <Route path="/card/:id" element={<CardDetail />}>
        {/* 这里是嵌套子路由，react-router会默认处理返回层级 */}
        <Route path="info" element={<CardInfo />} />
      </Route>
    </Routes>
  );
}

这样配置后，浏览器默认的返回按钮就能按/card/:id/info→/card/:id→/cards→/的顺序跳转，完全不需要依赖第三方库，直接用navigate(-1)就行。

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