以下是如何在 React 组件中使用 useLocation 的基本示例：

import { useLocation } from 'react-router-dom';function ComponentUsingLocation() {  const location = useLocation();  return (    <div>       当前路径为: {location.pathname}       {/* 如果需要显示查询参数，可以访问location.search */}       {/* 如果在导航时通过state传递了数据，可以通过location.state获取 */}       {location.state && <p>传递的数据: {JSON.stringify(location.state)}</p>}    </div>   ); }export default ComponentUsingLocation;

在上述代码中：

location.pathname 包含当前路由的路径部分

location.search 包含 URL 查询字符串（问号后面的部分）

location.state 在进行导航时可以通过 history.push 或 <Link> 组件的 state 属性传递的状态对象

例如如果从一个地方导航到另一个地方并传递状态：

import { useHistory } from 'react-router-dom';function SourceComponent() {  let history = useHistory();  function handleClick() {     history.push('/target', { someData: 'example data' });   }  return (    <button onClick={handleClick}>点击跳转并传递数据</button>   ); }

当你使用 /detail/:tid 这样的动态路由时你可以通过 useLocation 获取到的 pathname 中解析出 tid 的值这里是一个例子：

import { useLocation } from 'react-router-dom';function DetailComponent() {  const location = useLocation();  // 使用URLSearchParams或者自己编写函数来解析出tid  const tid = location.pathname.split('/').pop(); // 简单的方法，假设tid总是在路径的最后一部分  return (    <div>       当前详情ID为: {tid}       {/* 根据实际情况渲染详情内容 */}    </div>   ); }export default DetailComponent;

但是更推荐的方式是使用 useParams 钩子从 React Router 中获取动态参数：

import { useParams } from 'react-router-dom';function DetailComponent() {  let { tid } = useParams();  return (    <div>       当前详情ID为: {tid}       {/* 根据实际情况渲染详情内容 */}    </div>   ); }export default DetailComponent;

这样无论你的路由路径如何变化（例如变为 /detail/:tid/something-else）useParams 都能正确地提取出 tid 参数的值