如何在 React js 的自定義文件中使用 useLocation 掛鈎？

Question

我有一個單獨的文件，我將常用函數放在我的 react 項目中，名為MyFunctions.js 。 在這個文件中，我想使用useLocation鈎子來獲取當前路徑名 + 我當前 url 的查詢字符串。 但它給出了一個錯誤

React Hook "useLocation" is called in function "getCurrentURL" that is neither a React function component nor a custom React Hook function.

這是我的代碼： codesandbox

// MyFunctions.js
import useLocation from "react-router-dom";

export function getUrl() {
  const location = useLocation();
  return location.pathname + location.search;
}

// App.js
import "./styles.css";
import { HashRouter as Router, Route, Routes } from "react-router-dom";
import * as fn from "./MyFunctions";
import Test1 from "./components/Test1";

export default function App() {
  const a = fn.getUrl();

  return (
    <Router>
      <div className="App">
        <h1>Hello CodeSandbox: {a}</h1>
        <Routes>
          <Route path="/" element={<Test1 />} />
        </Routes>
      </div>
    </Router>
  );
}

// Test1.js
const Test1 = () => {
  return (
    <div>
      <h1>Lorem Ipsum</h1>
    </div>
  );
};

export default Test1;

Answer 1

在導入useLocation包裹在花括號內，如下所示：

import { useLocation } from "react-router-dom";

我建議你將getUrl重命名為useGetURL來滿足 React 的鈎子約定。

此外，您必須在<Router />的子級中調用useLocation 。 你沒有，因此，你會得到另一個錯誤： useLocation() may be used only in the context of a <Router> component.

我將其修復如下：

// App.js
import "./styles.css";
import { HashRouter as Router, Route, Routes } from "react-router-dom";
import * as fn from "./MyFunctions";
import Test1 from "./components/Test1";

export default function App() {
  return (
    <Router>
      <YourNestedComponent />
    </Router>
  );
}

function YourNestedComponent() {
  const a = fn.useGetUrl();

  return (
    <div className="App">
      <h1>Hello CodeSandbox: {a}</h1>
      <Routes>
        <Route path="/" element={<Test1 />} />
      </Routes>
    </div>
  );
}

// MyFunctions.js
import { useLocation } from "react-router-dom";

export function useGetUrl() {
  const location = useLocation();
  return location.pathname + location.search;
}

CodeSandbox： https ://codesandbox.io/s/stoic-orla-tbnb07

Answer 2

您不能在函數中使用鈎子導出鈎子，而不是像這樣

import {useLocation} from "react-router-dom";

export function useGetUrl() {
  const location = useLocation();
  return location.pathname + location.search;
}

並在任何組件中導入這個鈎子並像這樣使用它

import {useGetUrl} from '[your_filename].js'
const url = useGetUrl()

[注意] 你不能直接在 JSX 中調用這個鈎子，你必須首先在你的組件之上調用它，然后你可以在你的 jsx 中使用url ，在你使用這個鈎子的任何組件中確保它被<Router></Router>