React 路由基础：在您的应用程序中导航

前端

2023-11-01 10:26:25

React 路由：为您的单页应用程序导航赋能

在当今网络开发中，单页应用程序 (SPA) 的普及度持续攀升，它们允许用户在不刷新页面或切换标签页的情况下与网站进行交互。实现 SPA 的关键要素之一是路由，它负责管理应用程序内的页面导航。

React 路由：易于使用的路由解决方案

React 路由是一个强大的库，专门用于在 React 应用程序中管理路由。它提供了一系列组件和工具，让您可以轻松创建动态且用户友好的导航体验。本博客将深入探究 React 路由的基础知识，指导您使用此库提升应用程序的功能。

基础路由：Nav 和 NavLink

路由链接是用户在应用程序中导航的主要工具。React 路由提供了两个组件来创建路由链接：Nav 和 NavLink。

Nav ：这是一个基本的路由链接，用于导航到不同的路径。它通过 to prop 指定目标路径。
NavLink ：NavLink 是 Nav 的增强版本，提供了一些额外功能。除了基本的导航之外，NavLink 还根据当前激活的路径设置不同的样式。

路由参数：动态路由

路由参数允许您将动态数据传递给不同的路由组件。这对创建可重用组件很有用，这些组件可以根据传入的数据显示不同内容。

要使用路由参数，请在路由路径中定义参数占位符。例如，以下路径定义了一个名为 id 的参数：

/user/:id

然后，您可以在路由组件中使用 useParams 钩子访问参数值：

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

const User = () => {
  const { id } = useParams();

  return <p>用户 ID：{id}</p>;
};

受控和无状态组件：状态管理

在 React 中，组件可分为受控组件和无状态组件。

受控组件 ：这些组件的状态由父组件管理。它们使用 value 和 onChange props 来控制表单输入。
无状态组件 ：这些组件不维护自己的状态。它们接收 props 并渲染输出，没有任何副作用。

选择使用哪种类型的组件取决于您的具体需求。对于简单的呈现组件，无状态组件通常是首选，而对于需要管理状态的组件，受控组件则更合适。

技术指南：构建一个简单的 SPA

现在，让我们通过创建一个简单的单页应用程序来演示 React 路由的概念。

步骤 1：安装依赖项

npm install react-router-dom

步骤 2：创建路由组件

import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";

const Home = () => {
  return <h1>主页</h1>;
};

const About = () => {
  return <h1>关于我们</h1>;
};

const Contact = () => {
  return <h1>联系我们</h1>;
};

const App = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <NavLink to="/">主页</NavLink>
          </li>
          <li>
            <NavLink to="/about">关于我们</NavLink>
          </li>
          <li>
            <NavLink to="/contact">联系我们</NavLink>
          </li>
        </ul>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
};

export default App;