React实战 | 从零开始探索React Router的奥秘

2023-12-08 23:45:09

React从0开始：React Router篇（一）

前言

欢迎来到React Router的奇妙世界！React Router是一个强大的库，它允许你在单页应用中实现无缝的页面导航，而无需刷新整个页面。对于前端开发者来说，掌握React Router是必不可少的。在这一系列文章中，我们将深入探讨React Router的方方面面，从基础概念到高级用法。

认识路由组件

在React Router中，路由组件是实现页面导航的关键。它们允许你定义不同的路由路径，并指定当用户访问这些路径时要渲染的组件。

最常用的两种路由组件是：

BrowserRouter： 基于HTML5的History API，它通过修改浏览器的URL来实现路由。
HashRouter： 基于URL的哈希部分，它使用#符号来修改URL，而不会触发页面刷新。

路由切换

路由切换是React Router的核心功能。它允许你在不同的页面之间无缝切换，而无需刷新整个页面。这使得你的应用更加响应和用户友好。

要实现路由切换，你可以在路由组件中使用<Link>和<NavLink>组件。<Link>是一个简单的超链接，点击时会触发路由切换，而<NavLink>则是一个增强版的超链接，可以提供额外的功能，如高亮当前激活的路由。

示例

让我们创建一个简单的React Router应用，它有两个路由：主页和关于页。

import React, { useState } from "react";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Switch>
        <Route exact path="/">
          <h1>Home Page</h1>
        </Route>
        <Route path="/about">
          <h1>About Page</h1>
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;