React Router 6：了解 components

前端

2023-11-04 14:32:44

React Router 6 组件简介

React Router 6 是一个用于构建动态路由的库，为我们提供了一系列组件来管理路由。

组件是 React Router 6 中的一个重要概念，它允许我们在应用程序中创建不同的视图，并根据路由的变化在它们之间切换。

React Router 6 提供了多种内置组件，包括：

<BrowserRouter>：用于创建一个使用 HTML5 history API 的路由器。
<Route>：用于定义一个路由规则，当 URL 匹配该规则时，就会渲染相应的组件。
<Link>：用于在不同的路由之间导航。
<Switch>：用于匹配多个路由规则，并只渲染第一个匹配的组件。
<Redirect>：用于将一个路由重定向到另一个路由。

如何使用 React Router 6 组件

使用 React Router 6 组件非常简单，下面是一个简单的示例：

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

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

        <hr />

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

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;

export default App;