在React路由器中，<Switch>和将'Exact‘放在'path’之前有什么区别？

在React Router中，<Switch>组件用于渲染与当前URL匹配的第一个子<Route>或<Redirect>

Switch

<Switch>组件会遍历其所有子路由，并仅渲染与当前URL完全匹配的第一个路由。如果没有找到匹配项，则不渲染任何内容。

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

在这个例子中，当用户访问根路径（"/"）时，将渲染Home组件。当访问"/about"或"/contact"时，将分别渲染About和Contact组件。

Exact

exact属性用于确保只有当URL与path完全匹配时，才渲染对应的组件。如果没有exact属性，那么带有子路径的路由将始终匹配其父路由。

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />

在这个例子中，exact属性确保只有当用户访问根路径（"/"）时，才渲染Home组件。如果没有exact属性，当访问"/about"或"/contact"时，由于这些路径以"/"开头，Home组件也会被渲染。

总结

• <Switch>用于确保仅渲染与当前URL匹配的第一个子路由。
• exact属性用于确保只有当URL与path完全匹配时，才渲染对应的组件。

通常，你会在<Switch>组件内部使用带有exact属性的<Route>组件，以确保正确的路由匹配。