React路由器的钩子

React Router v5引入了强大的Hook机制，提供了四个便捷的路由Hook，简化了路由管理。本文将快速入门React Router v5的新模式，首先介绍新的路由渲染模式，然后深入探讨各个Hook的使用方法。

React Router v5之前的路由渲染

// 渲染路由并获取路由属性
<route component="{Home}" path="/"></route>

// 传递额外属性
<route path="/" render="{({" match> <profile match="{match}" mine="{true}"></profile>} /></route>

使用component语法时，路由属性（match、location和history）会隐式传递给组件。但如果需要传递额外属性，则必须改用render属性。需要注意的是，在component语法中添加内联函数会导致组件在每次渲染时重新挂载。

React Router v5之后的路由渲染

<route path="/"><home></home></route>

Home组件不再隐式接收路由属性。但是，无需修改Route本身，就可以向Home组件添加任何额外属性。避免了组件在每次渲染时重新挂载的问题，这是一种更简洁高效的API设计。

由于路由属性不再隐式传递，如何访问match、history或location呢？是否需要用withRouter包装所有组件？这就是Hook发挥作用的地方。

请注意，Hook是在React 16.8版本中引入的，因此需要使用16.8或更高版本的React。

useHistory Hook

• 提供对React Router中history属性的访问。
• 指向路由使用的history包依赖项。
• 主要用于通过函数进行编程式路由，例如push、replace等。

import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();
  return <button onclick="{()"> history.push('/profile')}>Profile</button>;
}

useLocation Hook

• 提供对React Router中location属性的访问。
• 类似于浏览器的window.location，但它代表路由状态和位置，可以在任何地方访问。
• 主要用于访问查询参数或完整的路由字符串。

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

function Profile() {
  const location = useLocation();
  useEffect(() => {
    const currentPath = location.pathname;
    const searchParams = new URLSearchParams(location.search);
    // ... 使用 currentPath 和 searchParams
  }, [location]);
  return <p>Profile</p>;
}

由于location属性是不可变的，useEffect会在每次路由更改时调用函数，非常适合操作搜索参数或当前路径。

useParams Hook

• 提供对URL中参数的访问。
• 此功能之前只能通过match.params实现。

import { useParams, Route } from 'react-router-dom';

function Profile() {
  const { name } = useParams();
  return <p>{name}'s Profile</p>;
}

function Dashboard() {
  return (
    <div>
      <nav>
        <link to="{`/profile/ann`}">Ann's Profile
      </nav>
      <main>
        <route path="/profile/:name"><profile></profile></route>
      </main>
    </div>
  );
}

useRouteMatch Hook

• 提供对match对象的访问。
• 如果不带参数，则返回组件或其父组件中最接近的匹配项。
• 主要用于构建嵌套路径。

import { useRouteMatch, Route } from 'react-router-dom';

function Auth() {
  const match = useRouteMatch();
  return (
    <div>
      <route path="{`${match.url}/login`}"><login></login></route>
      <route path="{`${match.url}/register`}"><register></register></route>
    </div>
  );
}

useRouteMatch还可以用于在不渲染Route的情况下访问match对象，方法是传递location参数。

例如，假设您需要在/profile渲染自己的个人资料，如果URL包含人员姓名（/profile/dan或/profile/ann），则渲染其他人的个人资料。如果不使用Hook，您需要编写一个Switch，列出两条路由并使用props进行自定义。但现在，使用Hook可以这样实现：

import { Route, BrowserRouter as Router, Link, useRouteMatch } from 'react-router-dom';

function Profile() {
  const match = useRouteMatch('/profile/:name');
  return match ? <p>{match.params.name}'s Profile</p> : <p>My own profile</p>;
}

export default function App() {
  return (
    <router>
      <nav>
        <link to="/profile">My Profile
        <br>
        <link to="{`/profile/ann`}">Ann's Profile
      </nav>
      <route path="/profile"><profile></profile></route>
    </router>
  );
}

您还可以将exact或sensitive等所有Route属性作为对象传递给useRouteMatch。

总结

Hook和显式Route本身具有隐藏的优势。这些Hook有助于避免早期模式中出现的许多混乱和复杂性，减少了人为错误，使路由代码更易于维护，并更容易升级到新的React Router版本。

以上是React路由器的钩子的详细内容。更多信息请关注PHP中文网其他相关文章！