如何使用 React Router 和 useParams hook 检索哈希（#）后的参数？

Question

我有一条像这样的路线

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

在我的 React Router 中。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以下位置导入：

\n

import useLocation from "react-router-dom";\n

\n

在组件函数中，使用：

\n

const { hash } = useLocation();\n

\n\n

来自文档：

\n

\n

useLocation

\n

该useLocation钩子返回location表示当前 URL 的对象。您可以将其视为每当 URL 更改时useState都会返回新值的 a 。location

\n

这可能非常有用，例如在您希望每当加载新页面时使用网络分析工具触发新的 \xe2\x80\x9cpage view\xe2\x80\x9d 事件的情况下

\n

\n