使用 React Router 创建后退按钮

作者

使用 React Router 创建后退按钮

Create a Back button with React Router

使用 React Router 创建后退按钮：

  1. 将onClick按钮上的属性设置为一个函数。
  2. 使用useNavigate()钩子，例如const navigate = useNavigate();。
  3. 调用navigate()传递它的函数-1– navigate(-1)。
应用程序.js
import {Link, Routes, Route, useNavigate} from 'react-router-dom';

export default function App() {
  const navigate = useNavigate();

  return (
    <div>
      <button onClick={() => navigate(-1)}>Go back 1 Page</button>
      <button onClick={() => navigate(1)}>Go forward 1 Page</button>

      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/contacts">Contacts</Link>
            </li>
          </ul>
        </nav>

        {/* 👇️ Wrap your Route components in a Routes component */}
        <Routes>
          <Route path="/contacts" element={<Contacts />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function Contacts() {
  return <h2>Contacts</h2>;
}

创建后退按钮反应路由器

useNavigate挂钩返回一个函数，让我们以编程方式导航，例如在提交表单或单击按钮后。

要返回上一页，请将其-1作为参数传递给该函数，例如。 navigate()navigate(-1)

调用navigatewith 与-1点击浏览器中的后退按钮相同。

同样，您可以调用navigate函数 with-2返回 2 页。

您还可以使用该navigate功能以编程方式导航到不同的路线，例如navigate(/contacts)。

应用程序.js
import {useNavigate} from 'react-router-dom';

export default function App() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 👇️ replace set to true
    navigate('/contacts', {replace: true});
  };

  return (
    <div>
      <button onClick={handleClick}>Navigate to /contacts</button>
    </div>
  );
}

当replace属性设置为true选项对象上时，历史记录堆栈中的当前条目将被新的条目替换为新的。

换句话说，导航到新路由不会将新条目推送到历史堆栈中，因此如果用户单击后退按钮，他们将无法导航到上一页。

这很有用，例如，当用户登录时 – 您不希望他们能够单击后退按钮并返回到登录页面。

或者，如果您有一个重定向到不同页面的路由 – 您不希望用户单击后退按钮并再次重定向。

如果您需要向前导航一页，请navigate使用1–
调用navigate(1)。

要useNavigate在应用程序中使用挂钩，请确保文件中的App组件index.js包装在Router.

索引.js
import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ wrap App in Router
root.render(
  <Router>
    <App />
  </Router>
);
用Router组件包装你的 React 应用程序的最佳位置是在你的index.js文件中，因为那是你的 React 应用程序的入口点。

一旦你的整个应用程序都被一个组件包裹起来Router，你就可以在你的组件中的任何地方使用 react router 包中的任何钩子。

–

发表评论