在 React Router 中使用 Switch 组件

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

对于 React 新手来说，React 中的路由可能有点难懂。它与 Ruby on Rails 的路由系统截然不同，因为 React 的路由完全在客户端完成。客户端负责 React 中的所有路由操作。

在 React 中使用路由时，我遇到了 `<route>`<Switch />组件，并注意到人们用它来代替 `<route>` <Router />。这促使我进一步研究两者之间的区别，以及为什么使用 `<route>`<Switch />会非常有用，并且是两者中更优的选择。

<Router />可以包含许多嵌套路由，这些路由会进行全集渲染。“全集渲染”是什么意思呢？它指的是，只要路由的路径与 URL 路径匹配，路由器就会渲染该路由的组件。让我们来看下面的例子。

   ReactDOM.render((
       <Router>
         <Route path="/" component={Home} />
         <Route path="/login" component={Login} />
         <Route path="/explore" component={Explore} />
       </Router>),
       document.getElementById('root')
   );

在这个例子中，当用户访问 URL 路径 `<url>` 时/，`<header>` 、` Home<vb> Login` 和 ` Explore<header>` 组件都会渲染。这是因为这三个路由的/路径中都包含了 `<url>`。` <Route /><url>` 组件的这种特性非常实用，它可以始终渲染某些组件，例如头部、导航栏以及网站每个页面上都应该显示的其他组件。

确保路由不会包含所有路径的一种方法是向路由添加“精确路径”。

   ReactDOM.render((
       <Router>
         <Route path="/" component={Home} />
         <Route exact path="/login" component={Login} />
         <Route path="/explore" component={Explore} />
       </Router>),
       document.getElementById('root')
   );

上面我为login路由添加了一个精确的路径。因此，当我们访问该路径时/login，Login页面上只会渲染该组件。

那么，使用这种方法究竟有什么优势呢<Switch />？该<Switch />组件只会渲染第一个匹配/包含指定路径的路由。一旦找到匹配的路由，它就不会再寻找其他匹配项。不仅如此，它还能正确处理嵌套路由，而其他方法则<Router />无法做到这一点。

   ReactDOM.render((
       <Switch>
         <Route exact path="/" component={Home} />
         <Route path="/login" component={Login} />
         <Route path="/explore" component={Explore} />
       </Switch>),
       document.getElementById('root')
   );

在上面的例子中，当用户访问 `<route>` 时/login，Login只会渲染 `<component>` 组件。需要注意的是，对于位于 `<route>` 内部的路由，仍然可以而且应该使用精确路径<Switch />。为 `<route>` 内部的路由指定精确路径，<Switch />可以确保路由与指定的路径完全匹配。例如，如果没有为上面的 `<route>` 指定精确路径/，那么访问 `<route>` 的用户/login将会看到Home`<component>` 组件渲染在网页上。