配置 React 路由器 - Shell/Bash

React 路由器是一种在 React 网站中实现页面导航的工具。配置 React 路由器是一个必要的步骤，它允许您在应用程序中定义 URL，并将 URL 映射到特定的组件或页面。在本文中，我们将使用 Shell/Bash 来配置 React 路由器。

安装 React 路由器

首先，在您的 React 项目中安装 react-router-dom 库。您可以使用 npm 或 yarn 来完成此操作:

# 使用 npm
npm install react-router-dom

# 使用 yarn
yarn add react-router-dom

创建路由器

在您的 React 项目中，您需要为路由器创建一个文件。我们将其称为 Route.js。使用以下命令创建该文件：

touch Route.js

打开 Route.js 文件，并始终从上面开始编写代码。

导入所需的组件和库

首先，您需要在文件的顶部导入所需的组件和库。在 Route.js 文件的顶部添加以下代码：

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

这将导入必要的库和组件，允许我们创建 React 路由器和定义路由。

创建路由

在 Route.js 文件中，定义您的应用程序的路由。添加以下代码来定义您的第一个路由：

function Routes() {
  return (
    <BrowserRouter>
      <Nav />

      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/about" component={About} />
        <Route exact path="/contact-us" component={ContactUs} />
        <Route component={FourOhFour} />
      </Switch>

      <Footer />
    </BrowserRouter>
  );
}

这个函数创建了一个 React 组件，在组件内部，它使用 BrowserRouter、Nav、Switch、Route 和 Footer 组件。这里使用了四个 Route 组件，每个 Route 映射到应用程序中的特定URL，指定对应的组件。

定义路由和组件

在上一个步骤中，我们在 Routes 函数中使用组件来定义路由，但是我们需要定义这些组件。让我们为主页、关于我们、联系我们和四个四个页面分别创建组件。

function Home() {
  return <div>首页</div>;
}

function About() {
  return <div>关于我们</div>;
}

function ContactUs() {
  return <div>联系我们</div>;
}

function FourOhFour() {
  return <div>页面未找到</div>;
}

输出路由器

最后一步是导出 Routes 组件。添加以下代码：

export default Routes;

总结

通过在 React 项目中创建 Route.js 文件并编写所需的代码，您创建了一个 React 路由器，可以定义 URL，并将 URL 映射到应用程序的不同组件或页面。Shell/Bash 是一种方便的工具，可以用来创建 Route.js 文件和导入所需的库和组件。启动应用程序后，您应该能够使用上面定义的 URL 访问页面。