React Router 中 Route, Link, Switch, Redirect 组件的作用是什么？

推荐答案

• Route: 用于定义路由规则，根据路径匹配对应的组件。
• Link: 用于在应用中导航，生成一个不会重新加载页面的链接。
• Switch: 用于包裹多个 Route，确保只渲染第一个匹配的 Route。
• Redirect: 用于重定向到另一个路径。

本题详细解读

Route

Route 是 React Router 中用于定义路由规则的核心组件。它通过 path 属性指定路径，当浏览器的 URL 与 path 匹配时，Route 会渲染对应的组件。例如：

<Route path="/about" component={About} />

当用户访问 /about 时，About 组件会被渲染。

Link

Link 组件用于在应用中创建导航链接。它生成的链接不会导致页面重新加载，而是通过 React Router 进行页面切换。例如：

<Link to="/about">About</Link>

点击这个链接会导航到 /about 路径。

Switch

Switch 组件用于包裹多个 Route，确保只渲染第一个匹配的 Route。这在有多个路由规则时非常有用，可以避免多个路由同时匹配的情况。例如：

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

当用户访问 /about 时，只有 About 组件会被渲染，即使 / 也匹配。

Redirect

Redirect 组件用于将用户重定向到另一个路径。它通常用于处理未授权的访问或默认路由。例如：

<Redirect from="/old-path" to="/new-path" />

当用户访问 /old-path 时，会自动重定向到 /new-path。