如何在 React 项目中使用 React-Router-dom 路由组件-JavaScript中文网-JavaScript教程资源分享门户

React-Router-dom 是 React 框架中用于管理路由的一个官方组件。通过 React-Router-dom 可以便捷地实现应用程序的不同页面之间的跳转，并且支持动态路由配置。本文将介绍如何在 React 项目中使用 React-Router-dom。

安装 React-Router-dom

在使用 React-Router-dom 之前，需要先安装它。可以使用 npm 安装：

npm install --save react-router-dom

配置路由组件

安装完成后，就可以开始使用 React-Router-dom 了。首先需要在应用程序的根组件中（通常是 index.js）引入 React-Router-dom：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

其中，Router 是路由主容器，Route 是路由规则配置，Switch 负责切换路由。

下面是一个简单的路由配置示例：

// www.javascriptcn.com code example
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

以上示例中定义了两个路由规则：

/ 路由规则使用 exact 关键词精确匹配 URL，渲染 Home 组件；
/about 路由规则渲染 About 组件。

在以上代码片段中，Home 和 About 组件可以通过解析 props.location 获取 URL 中的参数和查询条件。

导航跳转

上面配置了路由规则后，我们还需要添加导航菜单进行跳转。使用 <Link> 标签可以在 React 中实现导航功能。示例代码如下：

// www.javascriptcn.com code example
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

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

export default App;

以上代码中，<Link> 标签的 to 属性指定了要跳转的 URL 路径。在 React 中使用 <Link> 标签时，React-Router-dom 会将其转换为相应的 <a> 标签，省去了手动写链接的麻烦。注意，因为 <Link> 是一个 React 组件，所以必须在包裹它的组件中导入 BrowserRouter 或 Router 声明路由容器。

动态路由

除了静态路由以外，React-Router-dom 还支持动态路由。动态路由通常用于匹配一定规则的 URL，例如 /order/:id，其中 id 是在 URL 中传递的订单编号。

下面是一个动态路由的示例代码：

// www.javascriptcn.com code example
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import OrderDetail from "./components/OrderDetail";

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/order/:id" component={OrderDetail} />
      </Switch>
    </Router>
  );
}

export default App;

示例代码中的 OrderDetail 组件接收一个动态参数 id，可以通过 props.match.params.id 获取 URL 中的订单编号。

以上就是在 React 项目中使用 React-Router-dom 路由组件的详细介绍。通过本文的学习，读者可以了解到 React-Router-dom 路由组件的基本使用方法，以及如何配置静态路由、动态路由和导航菜单。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6793afe3504e4ea9bd807046

如何在 React 项目中使用 React-Router-dom 路由组件

安装 React-Router-dom

配置路由组件

导航跳转

动态路由

接着读