React Router 6 - useLocation 不像我预期的那样工作 [重复]-解网

问：

去年关闭。

我是 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在加载时运行，以及如果我使用浏览器按钮向前或向后移动。但是当我单击“单击我”按钮时，不会。我错过了什么？我喜欢在 React 前端代码中保持这种“位置感知”尽可能简单。比如，无论您是否定义了 React Router 路由，是否有一种技术可以在应用程序中工作？

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

javascript reactjs 打字稿 react-router-dom pushstate

在哪里渲染？它是否安装在稳定的位置，以便可以监听位置变化？不要使用 to 影响导航更改，因为这些更改被视为无意的副作用。请改用钩子中的函数，或者只使用 .这样的事情有助于回答您的问题吗？stackoverflow.com/a/71393138/8690857它实际上是的 RRDv6 版本。无需显式侦听 POP 操作，只需在导航操作生效时调用回调即可。RandLocationwindow.historynavigateuseNavigateLinkhistory.listen

答：

6赞 rainkinz 9/21/2022 #1

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

你可以使用钩子。也许是这样的：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>

您可能还想看看： https://stackoverflow.com/a/70095819/122201

React Router 6 - useLocation 不像我预期的那样工作 [重复]

React Router 6 - useLocation Not Working Like I Expected [duplicate]

评论

评论