当前位置：首页 > news >正文

React之旅-03 路由

news 来源：原创 2025/5/7 6:51:25

做为前端开发框架，React 的组件化设计思想，使前端开发变得更加灵活高效。对于大型复杂的项目来说，页面之间的导航变得尤为重要。因此如何管理路由，是所有开发者必须考虑的问题。

React 官方推荐的路由库-React Router，它是React应用程序中路由的标准库，支持视图/组件之间的导航，同时保持UI与URL同步。它广泛用于构建具有动态路由的单页应用程序（SPA）。

React Router官网：React Router Official Documentation

安装，打开之前创建的项目，在终端中输入命令：

npm install react-router-dom

如下图所示：

编辑App.tsx文件，代码如下：

import "./App.css";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

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

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

function App() {

  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

在终端中运行：npm run dev ，界面如下图：

在浏览器地址栏中输入：http://localhost:5174/，如下图：

点击 Home 和 About 链接，可切换界面，到目前为止，基于React Router的简单路由已经实现。

补充，不同组件的区别，来源于DeepSeek的解释：

组件	角色	关键特性
`BrowserRouter`	路由容器，管理History API	包裹整个应用，提供路由上下文环境
`Routes`	路由匹配容器，包裹多个`Route`	在v6中替代`Switch`，自动选择最优匹配
`Route`	定义路径与组件的映射关系	通过`path`和`element`配置渲染逻辑
`Link`	实现无刷新导航的链接	类似`<a>`标签，但通过`to`属性控制SPA内跳转