为什么在ReactRouterv4中使用switch关键字？

原文:https://www . geesforgeks . org/why-switch-关键字-in-react-router-v4/

ReactJS 是一个 Javascript 库，用于构建单页应用程序(SPA)。默认情况下，React 不提供路由功能。我们可以在 ReactJS 项目中使用 React Router 实现路由。React Router 是一个库，它支持在 React 应用程序中各种组件的视图之间进行导航，允许更改浏览器 URL，并使用户界面与 URL 保持同步。

在本文中，我们将了解路由如何在 React Router 中工作，以及如何利用 React Router 提供的交换机组件。

创建反应应用程序并安装模块:

步骤 1: 使用以下命令创建一个 React 应用程序。

npx create-react-app SWITCH_DEMO_APP


步骤 2: 创建项目文件夹后，使用以下命令移动到该文件夹。

cd SWITCH_DEMO_APP


步骤 3: 创建 React 应用程序后，使用以下命令将 React 路由器作为依赖项安装。

npm install --save react-router-dom


项目结构:删除部分非必需文件后的项目结构如下图所示。

项目结构

示例 1:不带交换机组件的路由–当我们使用 React Router 执行路由时，无论何时呈现页面，URL 路径都将与每条路由相匹配。所有匹配给定网址路径的路由路径都会被呈现。App.js 文件的内容如下。在这个文件中，我们创建了四个 div，每个 div 包含一个由 React Router 提供的链接组件。我们还创建了五条路线，即主页、个人资料、产品、产品/鞋子，以及一条路径等于 a *的路线，该路线是与每个网址路径匹配的通配符。

React Router 中的路径匹配是如何工作的？

React 路由器获取相对 URL，并将其与路由组件中提供的每个路径进行匹配。路线匹配的方式是，如果匹配了该相对网址的一部分，则呈现该路线。例如，如果相对 URL 为/产品/鞋子，则路径 / 、/产品、/产品/鞋子与 URL 匹配，并且渲染所有三条路线，但是/配置文件与 URL 不匹配。

文件名:App.js

java 描述语言

import React, { Fragment } from "react";
import { BrowserRouter as Router, Link, 
    Route } from "react-router-dom";
const Home = () => {
  return

Home

运行应用程序的步骤:从项目的根目录使用以下命令运行应用程序。

npm start


输出:点击‘鞋子’链接时显示网页的图片。

示例 2:使用交换机组件进行路由–当我们将我们的路由包装在交换机组件中时，它会确保一次只呈现一条路由。因此，在这种情况下，第一条路由将相对网址与每个路由组件的路径相匹配，并且只呈现与相对网址的一部分相匹配的第一条路径，如上所述。

语法:使用 Switch 组件的语法如下。

如果两条路线相互匹配，那么我们可以使用如下所示的精确的道具。

通过使用这个精确的道具，我们确保只有当相对网址与 / 完全匹配时，才会渲染回家路线。现在，如果相对网址是/配置文件，那么在代码中，如果配置文件路由位于 / 路由下方，则仅渲染配置文件路由并不重要。下面是我们使用 Switch 组件时 App.js 文件的内容。

文件名:App.js

java 描述语言

import React, { Fragment } from 'react';
import { BrowserRouter as Router, 
  Link, Route, Switch } from 'react-router-dom';
const Home = () => {
  return

Home