为什么在 React Router v4 中使用 switch 关键字？
ReactJS 是一个用于构建单页应用程序 (SPA) 的 javascript 库。 React 默认不提供路由功能。我们可以使用 React Router 在 ReactJS 项目中实现路由。 React Router 是一个库，它可以在 React 应用程序中的各种组件的视图之间导航，允许更改浏览器 URL，并使 UI 与 URL 保持同步。
在本文中，我们将了解路由在 React Router 中是如何工作的，以及我们如何利用 React Router 提供的 Switch 组件。
创建 React 应用程序并安装模块：
第 1 步：使用以下命令创建一个 React 应用程序。
npx create-react-app SWITCH_DEMO_APP第 2 步：创建项目文件夹后，使用以下命令移动到该文件夹。
cd SWITCH_DEMO_APP第 3 步：创建 React 应用程序后，使用以下命令将 React 路由器安装为依赖项。
npm install --save react-router-dom项目结构：删除一些不需要的文件后的项目结构如下图所示。
项目结构
示例 1：没有 Switch 组件的路由 –当我们使用 React Router 执行路由时，每当呈现页面时，URL 路径都会与每个路由匹配。呈现与给定 URL 路径匹配的所有路由路径。 App.js 文件的内容如下所述。在这个文件中，我们创建了四个 div，每个 div 都包含一个由 React Router 提供的链接组件。我们还创建了五个路由，即 home、profile、products、products/shoes 和一个路径等于 * 的路由，它是与每个 URL 路径匹配的通配符。
React Router 中的路径匹配是如何工作的？
React 路由器采用相对 URL 并将其与 Route 组件中提供的每个路径匹配。路由匹配的方式是，如果此相对 URL 的一部分匹配，则呈现该路由。例如，如果相对 URL 是/products/shoes ，则路径/ 、 /products和/products/shoes与 URL 匹配，并且所有三个路由都被呈现，但/profile与 URL 不匹配。
文件名：App.js
Javascript
import React, { Fragment } from "react";
import { BrowserRouter as Router, Link,
Route } from "react-router-dom";
const Home = () => {
return Home
;
};
const Profile = () => {
return Profile
;
};
const Shoes = () => {
return Shoes
;
};
const Products = () => {
return Products
;
};
const App = () => {
return (
Home
Products
Shoes
profile
);
};
export default App;Javascript
import React, { Fragment } from 'react';
import { BrowserRouter as Router,
Link, Route, Switch } from 'react-router-dom';
const Home = () => {
return Home
;
};
const Profile = () => {
return Profile
;
};
const Shoes = () => {
return Shoes
;
};
const Products = () => {
return Products
;
};
const App = () => {
return (
Home
Products
Shoes
profile
);
};
export default App;运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。
npm start输出：当我们单击“鞋子”链接时显示网页的图像。
示例 2：使用 Switch 组件进行路由 –当我们将路由包装在 Switch 组件中时，它会确保一次只渲染一个路由。所以在这种情况下，第一个将相对 URL 与每个 Route 组件的路径匹配的路由，并且只呈现与我们上面讨论的相对 URL 部分匹配的第一个路径。
语法：下面提到了使用 Switch 组件的语法。
如果两条路线相互匹配，那么我们可以使用如下所示的确切属性。
通过使用这个确切的道具，我们确保只有当相对 URL 完全匹配/时才会呈现主路由。现在，如果相对 URL 是/profile ，那么如果配置文件路由在代码中的/路由下方，则只呈现配置文件路由无关紧要。我们使用 Switch 组件时的 App.js 文件的内容如下。
文件名：App.js
Javascript
import React, { Fragment } from 'react';
import { BrowserRouter as Router,
Link, Route, Switch } from 'react-router-dom';
const Home = () => {
return Home
;
};
const Profile = () => {
return Profile
;
};
const Shoes = () => {
return Shoes
;
};
const Products = () => {
return Products
;
};
const App = () => {
return (
Home
Products
Shoes
profile
);
};
export default App;
运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。
npm start输出：使用 Switch 组件时单击“鞋子”链接时显示网页的图像
