理解React地址伪跳转方式，声明式导航和函数式导航

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在普通页面里面，页面跳转一般是使用<a/>标签来解决的。但是，在正统的react世界里面，是强调一个页面走天下的。所以，链接<a>就显得有些多余。事实上，react网站也可能需要页面跳转。但是，一般来说，它是个伪造的页面跳转。这就引出了react-router-dom的专业范围。

苏南大叔的“程序如此灵动”，记录苏南大叔的编程心得体会。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1。

前文回顾

前文主要参考下面这两篇文章：

• https://newsn.net/say/react-router.html
• https://newsn.net/say/react-router-params.html

为了更好的理解逻辑流程，这里本该分为多个页面的内容，合并到了单个文件里面。大大简化了代码逻辑。基于create-react-app默认的cra模版，进行修改。

主要的文件结构创建逻辑代码，可以参考：

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

代码修改index.js

这里主要就是引入了BrowserRouter，并且使用其包裹了app组件。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter as Router,HashRouter} from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

本文的BrowserRouter换成HashRouter的话，也是可以正常使用的。只不过地址栏里面的地址，会比较匪夷所思。

代码修改App.js

这个App.js是重点代码，合并了好几个文件逻辑。是本文的重点内容。

import {
  Routes,
  Route,
  Link,
  useNavigate,
} from "react-router-dom";

function App() {
  const go = useNavigate();
  return (
    <div className="App">
      <header className="App-header">
        <nav>
          <Link to="/">Index</Link>__
          <Link to="/about">about</Link>__
          <button onClick={() => go("/")}>首页</button>__
          <button onClick={() => go("/about")}>关于</button>__
          <a href="https://newsn.net">苏南大叔</a>__
          <a href="https://reactjs.org" target="_blank">
            ReactJs
          </a>
        </nav>
        <Routes>
          <Route path="/" index element={<Index />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </header>
    </div>
  );
}

function Index() {
  return (
      <main>
        <h2>
          首页
        </h2>
      </main>
  );
}

function About() {
  return (
      <main>
        <h2>
          关于
        </h2>
      </main>
  );
}
export default App;

使用npm start看看效果。

传统连接 a

效果图里面，最后两个导航，就是使用传统的连接<a>写法，完全没有任何问题。所以，react和传统页面跳转方式相悖的结论，是错误的，这里不做解释。只不过，使用链接<a>就跳出react的世界体系设定了。

声明式导航 Link

在react-router-dom里面，引出Link。通过设置to属性来设置页面地址。（众所周知，react的世界里面是页面伪跳转）。这对应的就是传统意义上的链接标签。

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

<Link to="/">Index</Link>

通过浏览器的f12，可以看到这个<Link to=''></Link>，最终依然是被转化成了<a href=''></a>。和传统的a对比一下的话，a是整页刷新，Link是局部刷新，并且Link必须使用在Rounter相关代码下才能正常使用。

声明式导航 NavLink

NavLink和Link基本相似，但是，NavLink的特殊之处在于，可以根据当前地址情况，更改自身的css设定。就类似于“面包屑导航”里面的链接作用。命中的导航会被默认添加名为active的className。

import {
  NavLink
} from "react-router-dom";
import "./app.css"

a.active{
    color:red;
    font-weight: bold;
}

<NavLink to="/s">第一层S</NavLink>__
<NavLink to="/s/n">第二层N</NavLink>__
<NavLink to="/s/o">第二层O</NavLink>__
<NavLink to="/s/o/k">第三层K</NavLink>

从效果上看，同时可以有多层链接，都可以被active，取得active的效果。

函数式导航 useNavigate()

react中以use开头的方法，都是hook。所以，useNavigate()也是一个hook。这对应的就是传统意义上的事件跳转。

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

const go = useNavigate();

<button onClick={() => go("/about")}>文字</button>

<button onClick={() => go("/about", { replace: true })}>销毁来源页</button>

通过浏览器的f12，可以看到这个<button onClick={() => go("/about")}>文字</button>，最终依然是被转化成了<button>文字</button>。事件定义被隐藏了...

另外，特别强调：并且useNavigate()必须使用在Rounter相关代码下才能正常使用。

结束语

本文主要解释了如何通过react-router-dom做页面跳转。其实就是传统连接a在react的世界里面的最新化身表现而已。更多react经验文章，请参考苏南大叔的文章：

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

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