Question

我有一条类似的路线

<Route path="/search/:slug"><SearchPage /></Route>

在我的 React 路由器中。 SearchPage 是一个使用 useParams() 提供的 react-router-dom 钩子的组件。

// SearchPage.js
import React from 'react';
import { useParams } from 'react-router-dom';

export function SearchPage(props) {
    const { slug } = useParams();
    console.log(slug)
    // ...do other stuff
}

但是，当我导航到 /search/foo#bar 时，SearchPage 组件仅接收 foo 中的 slug。我的组件是否可以接收完整的 foo#bar，或者更好的是，分别接收 foo 和 bar？

Answer 1

您需要使用 useLocation 钩子并从那里获取 hash。第一步是从 useLocation 导入 react-router-dom：

import useLocation from "react-router-dom";

在组件函数内部，使用这个：

const { hash } = useLocation();

来自docs：

<块引用>

useLocation

useLocation 钩子返回表示当前 URL 的 location 对象。您可以把它想象成一个 useState，它在 URL 改变时返回一个新的 location。

这可能非常有用，例如如果您希望在加载新页面时使用网络分析工具触发新的“页面查看”事件

如何使用 React Router 和 useParams 钩子在散列（#）之后检索参数？

1 个答案: