reactjs路由：react-router-dom安装及路由代码示例

一时失言乱红尘 2024-02-18 13:13 16阅读 0赞

React 路由是用于管理应用程序中不同页面之间导航的库。它允许你在单页面应用程序（Single-Page Application, SPA）中动态地切换内容，而无需重新加载整个页面。

React 路由有多种实现方式，其中最常用的是 React Router。React Router 是一个基于 React 的第三方库，提供了一组用于处理路由的组件和 API。

以下是一个简单的示例，展示了如何使用 React Router 实现路由功能：

首先，确保你已经安装了 React Router。可以使用 npm 或 yarn 进行安装：

npm install react-router-dom

或

yarn add react-router-dom

接下来，我们可以在应用程序的根组件中设置路由。假设我们有两个页面：Home 页面和 About 页面。

import React from 'react';
    import {
         BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
    
    function Home() {
        
      return <h2>Home</h2>;
    }
    
    function About() {
        
      return <h2>About</h2>;
    }
    
    function App() {
        
      return (
        <Router>
          <div>
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
              </ul>
            </nav>
    
            <Switch>
              <Route path="/about">
                <About />
              </Route>
              <Route path="/">
                <Home />
              </Route>
            </Switch>
          </div>
        </Router>
      );
    }
    
    export default App;

在上面的示例中，我们首先导入了所需的组件和 API，包括 `BrowserRouter`、`Switch`、`Route` 和 `Link`。然后，我们定义了两个页面组件 `Home` 和 `About`。在 `App` 组件中，我们使用 `Router` 组件来包裹整个应用程序，并在导航栏中使用 `Link` 组件创建链接到不同页面的导航。最后，我们使用 `Switch` 和 `Route` 组件来定义路由规则，并在匹配到对应路由时渲染相应的组件。

这样，当用户点击导航栏中的链接时，React 路由会根据当前的 URL 路径匹配对应的路由规则，并渲染相应的页面组件。

这只是 React 路由的基本用法示例，React Router 还提供了更多功能和配置选项，如嵌套路由、路由参数等。你可以进一步学习 React Router 的官方文档来了解更多信息和示例。