使用 React Router 创建后退按钮

React 2年前 61

使用 React Router 创建后退按钮：

将按钮上的 onClick 属性设置为函数。
使用 useNavigate() 钩子，例如 const navigate = useNavigate();。
调用 navigate() 函数，传递它 -1 - navigate(-1)。

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>;
}

使用 React Router 创建后退按钮

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

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

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

同样，我们可以使用 -2 调用navigate功能以返回 2 页。

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

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> ); }

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

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

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

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

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

要在应用程序中使用 useNavigate 钩子，请确保 index.js 文件中的 App 组件被包装在路由器中。

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>
);