React Router 6 - useLocation 没有像我预期的那样工作

Question

我是 React 新手，所以我确信我不理解 useLocation 的用例 - 比如它有什么用处和它不适合什么。

我想要一种方法，使特定组件可以知道任何位置更改，包括来自 PushState 的位置更改。注意：我正在转换 Anuglar JS 1.0 代码库，该代码库仅使用哈希中的所有查询信息。我想在此重写中使用 PushState 浏览器功能。

下面的示例代码（我只是将其作为新的 React 应用程序组件中的单个组件：

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const RandLocation: React.FC = () => {
    const location = useLocation();

    useEffect(() => {
        console.log('location: ', location);
    }, [location]);
    
    return (
        <div>
            <button 
            onClick={() => {const r =  Math.random(); window.history.pushState({'rnd': r }, '', '/?rnd=' + r)}}>
                Click Me</button>
            <br/>
        </div>
    )
}
export default RandLocation;

我只看到 useEffect 在加载时运行，以及使用浏览器按钮前进或后退。但当我点击“Click Me”按钮时却没有。我缺少什么？我希望在 React 前端代码中保持这种“位置感知”尽可能简单。就像是否有一种技术可以在应用程序中工作，无论您是否定义了 React Router 路由？

我正在使用React版本17.0.2和react-router-dom版本6.2.2

Answer 1

我认为因为该window.history.pushState调用不在 React 的状态管理范围内，所以 React-router 不会意识到它。曾经有一种方法可以监听这些事件，但我不确定 React Router 6 中是否存在等效的方法。

你可以使用useNavigate钩子。也许是这样的：

import React, { useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";

const RandLocation = () => {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    console.log("location: ", location);
  }, [location]);

  return (
    <div>
      <button
        onClick={() => {
          const r = Math.random();
          //window.history.pushState({ rnd: r }, "", "/?rnd=" + r);
          navigate("/?rnd=" + r, { state: { rnd: r } });
        }}
      >
        Click Me
      </button>
      <br />
    </div>
  );
};
export default RandLocation;

这种方法的一个问题是，您必须设置一个默认路由来捕获没有定义路由的任何内容，如下所示：

 <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="*" element={<WhereYouWantDefaultRoutesToGoTo />} />
    </Routes>
  </BrowserRouter>

您可能还想看看：/sf/answers/4906707361/