React路由，Navigate组件和useNavigate钩子的区别和联系

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

Navigate是个组件，useNavigate是个钩子，两者功能相似，都是用于react router页面跳转的。它们和传统的windows.history功能也是类似的，而且三者的state等状态都是互通的。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1。

前文回顾

前文中，苏南大叔讲过react router中，页面“跳转”的几种方式：

• https://newsn.net/say/react-link.html

也分析过，react router的state和【h5的state】的关系对比：

• https://newsn.net/say/react-page-state.html

Navigate 组件

Navigate组件适用于需要返回组件，但是又需要跳转的情况。比如：

import { Navigate } from "react-router-dom";

<Routes>
  <Route path="/" element={<>首页</>}></Route>
  <Route path="/index" element={<Navigate to="/" replace={true} />}></Route>
  <Route path="/default" element={<Navigate to="/" replace={true} state={{from:"/default"}} />}></Route>
</Routes>

功能就是给/路由，增加两个别名：/index和/default。

useNavigate 钩子

useNavigate实现和上面一样的功能。参考：

import React, { useEffect } from "react";
import { Routes, Route } from "react-router";
import { useNavigate } from "react-router-dom";
function Index() {
  let navigate = useNavigate();
  useEffect(() => {
    navigate("/", { replace: true });
  }, []);
}
function Default() {
  let navigate = useNavigate();
  useEffect(() => {
    navigate("/", { replace: true, state: { from: "/default" } });
  }, []);
}
function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<>首页</>}></Route>
        <Route path="/index" element={<Index />}></Route>
        <Route path="/default" element={<Default />}></Route>
      </Routes>
    </div>
  );
}
export default App;

测试代码

下面的命令获取测试代码的基本框架：

create-react-app test
cd test
npm i react-router-dom --save

App.js：

import React, { useState } from "react";
import { Routes, Route } from "react-router";
import { Navigate, useNavigate, useLocation } from "react-router-dom";
function List() {
  const [page, setPage] = useState(1);
  let max = 3;
  return (
    <>
      {page < max ? (
        <div>第{page}页文章列表，<br />翻页完自动进入关于页面</div>
      ) : (
        <Navigate to="/about" replace={true} state={{ from: "组件" }}></Navigate>
      )}
      <button onClick={() => { setPage(page + 1); }}>翻页{page}/{max}</button>
    </>
  );
}
function App() {
  const location = useLocation();
  const from = location.state ? location.state.from : "";
  let navigate = useNavigate();
  function handleClick(url) {
    // navigate(url);
    navigate(url, { state: { from: location.pathname } });
    // navigate(url, { state: { from: location.pathname }, replace: true });
  }
  return (
    <div>
      <div>
        <button onClick={handleClick.bind({}, "/")}>首页</button>
        <button onClick={handleClick.bind({}, "/list")}>文章</button>
        <button onClick={handleClick.bind({}, "/about")}>关于</button>
      </div>
      <div>state来源：{from}</div>
      <br />
      <Routes>
        <Route path="/" element={<>首页</>}></Route>
        <Route path="/list" element={<List />}></Route>
        <Route path="/about" element={<>关于页面</>}></Route>
      </Routes>
    </div>
  );
}
export default App;

结语

更多react经验文章，请点击苏南大叔的博客文章：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。