React Router v4 在 SPA 中的基础使用教程-JavaScript中文网-JavaScript教程资源分享门户

React Router 是 React 应用中最流行的路由库之一，它可以让你在单页应用 (SPA) 中管理 URL，从而实现页面间的切换和状态管理。本文将介绍 React Router v4 的基础使用方法，包括路由的定义、渲染、传参和重定向等。

安装和基本概念

在使用 React Router 之前，你需要先安装它。可以使用 npm 进行安装：

npm install react-router-dom

安装完成后，在你的 React 应用中导入相应的模块：

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

Router 是 React Router 的根组件，它会处理 URL 和页面切换的逻辑。
Route 是 Route 对应的组件和路径的映射关系，它用于定义匹配某个 URL 的页面组件。
Link 是一个 React 组件，它生成一个具有正确的 href 属性的元素，使得点击它后可以切换到相应的路由。

定义路由

在 React Router 中，定义路由通常采用 Route 组件的 path 属性来实现。你可以将 path 属性设置为一个字符串，也可以通过正则表达式来匹配 URL。下面是一个简单的例子：

// javascriptcn.com 代码示例
<Router>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>
    </nav>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/topics" component={Topics} />
  </div>
</Router>

在上面的例子中，我们定义了三个路由：/、/about 和 /topics，分别对应了三个组件：Home、About 和 Topics。

注意到我们在 Link 和 Route 组件中都用到了 to 属性，这是因为在 React Router v4 中，所有的 URL 都以 to 属性的形式定义。因此，我们将 to 对应的路径传入 Link 组件来生成一个跳转链接，然后在 Route 组件中用 path 属性指定相应的路由路径。

另外，我们在 Home 路由中加上了 exact 属性，表示只有当 URL 完全匹配到 / 的时候才会渲染对应的组件。

路由渲染

当 URL 发生变化时，React Router 会根据 Route 组件的 path 属性去寻找一个匹配的路由，然后渲染对应的组件。在渲染时，React Router 会传递一些信息到对应的组件中，包括 location、history 和 match 等等。

location 表示当前 URL 对应的信息，包括 pathname、search、hash 等等。
history 是一个 API 对象，提供了 push 和 replace 方法，可以操作浏览器的历史记录，从而实现页面间的切换。
match 表示当前 URL 和 Route 组件的匹配信息，包括 params、url 等等。

在组件中，你可以根据这些信息来渲染不同的 UI。

// javascriptcn.com 代码示例
function Topics({ match }) {
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Route path={`${match.path}/:topicId`} component={Topic} />
      <Route
        exact
        path={match.path}
        render={() => <h3>Please select a topic.</h3>}
      />
    </div>
  );
}

在上面的例子中，我们首先定义了两个子路由：/components 和 /props-v-state，然后在组件中通过 match 属性获取当前路由的路径和参数，从而生成相应的链接。

另外，我们还定义了两个嵌套的 Route 组件，分别用于匹配子路由和空路径，当用户访问 /topics 时，会渲染 Please select a topic.，而当用户访问 /topics/:topicId 时，则会渲染对应的 Topic 组件。这里需要注意的是，params 参数被封装在 props.match.params 中，可以通过它来获取子路由的参数。

路由传参

在实际开发中，你可能需要把一些数据传递到组件中，以便进行相应的渲染。这时，你可以使用 Route 组件的 render 属性来传递参数：

// javascriptcn.com 代码示例
const products = [
  { id: 1, name: 'Apple', price: 1.99 },
  { id: 2, name: 'Banana', price: 0.99 },
  { id: 3, name: 'Orange', price: 1.49 },
];

<Route
  path="/products"
  render={() => <Products products={products} />}
/>

在上面的例子中，我们定义了一个名为 products 的数组，并通过 Route 组件的 render 属性将它传递给了 Products 组件。在 Products 组件中，你可以通过 this.props.products 来获取相应的数据。

另外，当需要进行动态路由传参时，可以使用 Route 组件的 path 属性来定义相应的路径。例如，在访问 /product/1 时，你可以通过以下方式传递参数：

<Route path="/product/:id" component={Product} />

在 Product 组件中可以使用 this.props.match.params.id 来获取动态参数。

路由重定向

最后，如果你需要在 SPA 中使用重定向功能，可以使用 Redirect 组件来实现。例如，当用户访问 /login 时，你希望将他重定向到 /dashboard 页面，可以这样做：

// javascriptcn.com 代码示例
<Router>
  <div>
    <Route
      exact
      path="/login"
      render={() => <Redirect to="/dashboard" />}
    />
    <Route path="/dashboard" component={Dashboard} />
  </div>
</Router>

在上面的例子中，我们在 /login 路由中使用了 Redirect 组件，当用户访问它时会被重定向到 /dashboard 页面。

总结

本文简要介绍了 React Router v4 在 SPA 中的基础使用方法，包括路由的定义、渲染、传参和重定向等。当然，还有很多高级的用法和技巧，可以到官方文档中阅读更多详情。希望本文能够帮助你更好地掌握 React Router 在实际项目中的使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6519b07695b1f8cacd1d40d4