useLocation

useLocation 是 React Router 提供的一个 Hook，它允许你在函数组件中获取当前的 URL 信息。这个 Hook 返回一个 location 对象，该对象包含了关于当前路由位置的详细信息，例如路径名 (pathname)、查询参数 (search) 和哈希值 (hash)。

useLocation 的返回值

useLocation 返回的对象结构如下：

{
  pathname: "/teams/1", // 当前 URL 的路径部分
  search: "?name=react", // 查询字符串（如果有的话）
  hash: "#the-hash", // 哈希值（如果有的话）
  state: { fromDashboard: true }, // 可选的状态对象，通常用于编程式导航时携带额外信息
  key: "ac3df4" // 唯一标识符，用于区分不同的历史条目
}

使用场景

• 响应 URL 变化：当 URL 发生变化时触发某些逻辑，比如更新页面标题或重新加载数据。
• 读取查询参数：解析并使用 URL 中的查询参数。
• 访问状态信息：在编程式导航时传递的状态对象可以在目标页面通过 location.state 访问到。
• 条件渲染：根据 URL 的不同部分有条件地渲染组件或内容。

示例代码

简单示例

import React from 'react';
import { useLocation } from 'react-router-dom';

function ShowLocation() {
  const location = useLocation();

  return (
    <div>
      <h2>You are at {location.pathname}</h2>
      <p>Search params: {location.search}</p>
      <p>Hash: {location.hash}</p>
      {location.state && (
        <p>State: {JSON.stringify(location.state)}</p>
      )}
    </div>
  );
}

export default ShowLocation;

在 URL 变化时执行副作用

你可以结合 useEffect 来监听 location 的变化，并在每次 URL 改变时执行一些副作用操作，比如记录页面视图或预取数据。

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function PageViewTracker({ children }) {
  const location = useLocation();

  useEffect(() => {
    // 模拟发送页面视图事件到分析工具
    console.log(`Tracking page view: ${location.pathname}`);
  }, [location]);

  return children;
}

// 使用 PageViewTracker 包装你的应用布局
function App() {
  return (
    <PageViewTracker>
      {/* 应用的其他部分 */}
    </PageViewTracker>
  );
}

export default App;

解析查询参数

如果你需要从 URL 中提取查询参数，可以使用 URLSearchParams API 或者第三方库如 qs。

import React from 'react';
import { useLocation } from 'react-router-dom';

function SearchParamsExample() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h2>Query Parameters</h2>
      <ul>
        {Array.from(queryParams.entries()).map(([key, value]) => (
          <li key={key}>{`${key}: ${value}`}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchParamsExample;

注意事项

• 性能优化：由于 useLocation 会在每次 URL 变化时重新渲染组件，因此请确保只在必要时使用它，并考虑将相关逻辑移到子组件中以避免不必要的重渲染。
• 兼容性：useLocation 是为函数组件设计的 Hook，在类组件中不能直接使用。对于类组件，你可能需要依赖于 withRouter HOC 或者其他方法来获取 location。

总结

useLocation 是一个非常有用的 Hook，它使得开发者能够轻松地访问和响应应用程序中的路由变化。无论是简单的显示当前位置还是复杂的业务逻辑处理，useLocation 都能提供必要的工具来完成任务。