如何在React中实现不同页面之间的链接跳转

前置说明 #

React是单页应用，直接使用原生<a>标签跳转会触发整页刷新，不符合单页应用的使用体验，我们需要用react-router-dom库实现客户端路由跳转。

操作步骤 #

• 第一步：安装路由依赖
  在项目根目录执行安装命令：

npm install react-router-dom

• 第二步：配置全局路由规则
  在你的根组件（一般是App.js）中配置路由映射，示例代码如下：

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Nav from './Nav'
import Home from './Home' // 你的主页组件
import Contact from './Contact' // 你的联系页面组件
import Blogs from './Blogs' // 你的博客页面组件

function App() {
  return (
    <BrowserRouter>
      {/* 导航组件放在所有页面公共位置 */}
      <Nav />
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/blogs" element={<Blogs />} />
        {/* 可以加默认路由重定向到主页 */}
        <Route path="*" element={<Home />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

• 第三步：修改Nav组件代码
  修正你原有组件的语法错误，同时把a标签替换为Link组件：

import React from 'react';
// 导入Link组件
import { Link } from 'react-router-dom';

// 去掉多余的括号，原来的写法是立即执行函数写法，不符合组件定义规范
function Nav (){
    return(
        <div id="navid">
            <nav className="navbar fixed-top navbar-expand-lg">
            
                <Link className="navbar-brand" to="/home">Manav</Link>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav ml-auto">
                        <li className="nav-item">
                            <Link className="nav-link" to="/contact">Colab</Link>
                        </li>
                        <li className="nav-item">
                            <Link className="nav-link" to="/blogs">Blogs</Link>
                        </li>
                    </ul>
                </div>

            </nav>
        </div>
        
    );
    
}

export default Nav;

补充说明 #

如果需要跳转到站外链接（比如第三方网站），才需要使用原生<a>标签，站内路由统一用Link组件即可实现无刷新跳转。

内容的提问来源于stack exchange，提问作者Manav