react/router

React Router 是 React.js 中用于管理应用程序路由的库。它允许开发者定义应用程序的URL与组件之间的映射关系。下面是一些关于 React Router 的基本概念：

基本概念

• 路由：路由定义了应用程序的URL与组件之间的映射关系。
• 组件：React Router 使用组件来渲染页面内容。
• 路由器：React Router 提供了一个 <Router> 组件，它是所有路由的根组件。

安装

npm install react-router-dom

使用方法

1. 定义路由：使用 <Route> 组件定义路由。

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

2. 配置路由器：使用 <Switch> 组件包裹 <Route> 组件，以确保只有一个路由被渲染。

   <Switch>
     <Route path="/about" component={AboutPage} />
     <Route path="/contact" component={ContactPage} />
   </Switch>
   

3. 导航：使用 <Link> 或 <Redirect> 组件进行页面跳转。

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

高级功能

• 动态路由：使用冒号在路由路径中定义参数。

  <Route path="/user/:id" component={UserProfile} />
  

• 路由匹配：使用正则表达式进行复杂的路由匹配。

示例

假设我们有一个包含两个页面的简单应用程序：关于页面和联系页面。

<Switch>
  <Route path="/about" component={AboutPage} />
  <Route path="/contact" component={ContactPage} />
</Switch>

在这个例子中，当用户访问 /about 或 /contact 时，相应的页面将被渲染。

更多关于 React Router 的信息，请访问我们的 React Router 教程。

React Router