解释为什么在React Router v4 中使用switch 关键字？

在 React Router v4 中，Switch 是一个非常重要的组件，它用于处理路由的匹配和渲染。使用 Switch 的主要原因有以下几点：

1. 唯一匹配：Switch 会遍历其所有的子路由（通常是 Route 组件），并且只渲染第一个匹配到的路由。这种特性非常有用，因为在一个给定的时间点，你通常只希望有一个路由被激活。如果没有 Switch，那么所有的 Route 组件，只要它们的路径匹配当前的 URL，都会被渲染。
2. 性能优化：由于 Switch 只渲染第一个匹配的路由，这有助于减少不必要的渲染，从而提高应用的性能。
3. 清晰的结构：使用 Switch 可以让你的路由配置更加清晰和易于理解。你可以将所有的路由定义在一个 Switch 组件内部，这样就可以很容易地看到哪些路由是存在的，以及它们的匹配顺序。

下面是一个使用 Switch 的简单例子：

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

function Contact() {
  return <h1>Contact</h1>;
}

export default App;

在这个例子中，无论 URL 是什么，Switch 都会确保只渲染一个 Route。如果 URL 是 /about，那么只有 <About /> 组件会被渲染。如果 URL 是 /contact，那么只有 <Contact /> 组件会被渲染。如果 URL 是 / 或者其他任何不匹配 /about 和 /contact 的路径，那么 <Home /> 组件会被渲染。