极简React Router示例

feellikelearning December 5, 2022 0 Comments

React Router是什么？

React是一个用于构建用户界面的JavaScript库，它提供了一组工具来创建和维护可重用的UI组件，主要应用于单网页应用。而React Router可以用于构建多网页应用，它可以控制应用程序中的内容显示，并且可以将浏览器的历史记录与应用程序的状态保持同步。这样，用户就可以使用浏览器的前进和后退按钮来导航应用程序中的不同部分。使用域名下的URL，都由完全由前端控制，不需要每个页面都发送后台请求。

学习react router实现的例子

在本文中，我们将会实现一个纯网页的小应用。这个应用没有后端，也没有使用CSS。实现它只需要修改一个JS文件。应用的顶端有一个导航栏，分别对应/和/about两个路由。点击对应的超级链接后，网页内容会更新为对应的组件(Component)。

详细步骤

首先，您需要安装 Node.js 和 npm，然后使用 npm 创建一个新的 React 项目：

npm init react-app my-app

在上面的命令中，我们使用 npm init 命令创建了一个名为 my-app 的 React 项目。这条命令会自动安装 React 和相关的依赖，并且会在当前目录中创建一个名为 my-app 的文件夹，用于存放项目的源代码和配置文件。

接下来，您可以使用 npm 安装 React Router 库：

cd my-app
npm install react-router-dom

在上面的命令中，我们使用 cd 命令进入了项目文件夹，然后使用 npm install 命令安装了 react-router-dom 库。这个库包含了 React Router 的所有组件，可以在 React 应用中实现路由功能。

安装完成后，您可以在 React 应用中使用 React Router 的组件，修改App.js如下：

import React from 'react';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';

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

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

export default App;

用npm运行网页应用如下：

npm start