菜鸟教程
教程 react tutorial

安装 React Router

安装步骤

React Router 是一个第三方库，因此首先需要通过 npm 或 yarn 安装它。在项目根目录下运行以下命令进行安装：

bash 
npm install react-router-dom

`

或者，如果您使用 yarn，则可以运行：

bash 
yarn add react-router-dom

配置 React Router

安装完成后，您可以在 React 项目中使用 React Router 来进行页面导航。以下是 React Router 的基本配置步骤：

步骤 1：导入 React Router 组件

React Router 提供了多个重要组件，最常用的是 BrowserRouter、Route 和 Link。

jsx 
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

步骤 2：配置 Router 和 Route

接下来，您需要使用 Router 组件来包裹整个应用程序，然后使用 Route 组件来定义不同路径下渲染的组件。

jsx 
function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

function Home() {
  return <h2>首页</h2>;
}

function About() {
  return <h2>关于</h2>;
}

在上面的代码中，<Router> 组件包裹了应用程序，<Route> 用于定义路由路径和相应的组件，而 Link 组件用于进行页面导航。

步骤 3：启动应用

完成配置后，您可以启动应用并访问不同的 URL 路径，React Router 会根据路径渲染对应的组件。

bash 
npm start

总结

通过以上步骤，您已经成功安装并配置了 React Router。在 React 应用中，React Router 让页面导航变得更加简洁和灵活，能够轻松处理不同的路由场景。

相关内容