使用 React Router 返回上一页

使用 React Router 返回上一页:

  1. 使用 useNavigate() 钩子,例如 const navigate = useNavigate();.
  2. 调用传递给它的 navigate() 函数 -1 – navigate(-1)。
  3. 使用 -1 调用 navigate 与点击后退按钮相同。
import {Link, Routes, Route, useNavigate} from 'react-router-dom';

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

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

      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

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

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

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

使用 React Router 返回上一页

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

使用 -1 调用导航与点击后退按钮相同。

同样,我们可以使用 -2 调用导航功能以返回 2 页。

要以编程方式导航到不同的路线,请将路径传递给导航功能,例如 navigate(‘/about’)。

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

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

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

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

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

这在用户登录时很有用,因为我们不希望他们能够单击后退按钮并返回登录页面。

如果我们有一个将用户重定向到不同页面的路由,它也很有用,因为您不希望用户单击后退按钮并再次被重定向。

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

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 router 包的任何钩子。