使用 React Router 中的 useHistory

React Router 是一种优秀的 React 应用程序的路由器。 它为更好地管理URL和组件之间的类似页面的转换提供了一个结构。 React Router 中的 useHistory hook 允许您轻松访问历史记录堆栈，使您可以在需要时轻松更新 URL。

安装

要使用 React Router，您需要安装 react-router-dom：

npm install react-router-dom

使用

在组件中，通过 useHistory hook 可以获取 history 对象。 使用 history 对象，您可以执行导航和其他操作。

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

function MyComponent() {
  const history = useHistory();

  function handleClick() {
    history.push('/login'); // 导航到登录页面
  }

  return (
    <div>
      <button onClick={handleClick}>跳转到登录</button>
    </div>
  );
}

在这里，我们导入 useHistory hook，然后使用它创建一个 history 对象。 我们使用该对象来执行导航，将用户带到 /login 路径。

示例

下面是一个更完整的示例，展示了如何在 React Router 应用程序中使用 useHistory。 它包括一个主页 /home 和一个登录页面 /login，还演示如何在用户登录前重定向到登录页面。

import React from 'react';
import { BrowserRouter as Router, Route, Switch, useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();

  function handleLogout() {
    // 删除用户凭据并将其重定向到登录页面
    localStorage.removeItem('authToken');
    history.push('/login');
  }

  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <button onClick={handleLogout}>退出登录</button>
    </div>
  );
}

function Login() {
  const history = useHistory();

  function handleLogin() {
    // 在此处检查用户凭据并将其存储在本地存储中
    localStorage.setItem('authToken', 'abc123');
    history.push('/home');
  }

  return (
    <div>
      <h1>请登录</h1>
      <button onClick={handleLogin}>登录</button>
    </div>
  );
}

function App() {
  const authToken = localStorage.getItem('authToken');

  return (
    <Router>
      <Switch>
        <Route exact path="/">
          { authToken ? <Home/> : <Login/> }
        </Route>
        <Route exact path="/home">
          <Home/>
        </Route>
        <Route exact path="/login">
          <Login/>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在这个示例中，我们定义了两个组件： Home 和 Login。 Home 中的handleLogout 函数负责删除用户凭证并将它们重定向到登录页面。 Login 组件中的 handleLogin 函数负责检查用户凭证并将它们存储在本地存储中。

注意，我们在 App 组件中使用 authToken 检查用户是否已登录，并根据需要渲染不同的组件。

结论

使用 React Router 中的 useHistory hook，您可以轻松地在应用程序中执行历史记录导航和其他操作。 它为应用程序提供了更好的 URL 管理和组件之间的转换。 请使用它来提高您的 React 应用程序的用户体验。