React路由与项目实践 | 青训营笔记

Kennem
145 阅读6分钟

路由（Router）：路由（Router）是一种负责寻径的网络设备，它在互连网络中从多条路径中寻找通讯量最少的一条网络路径提供给用户通信。路由用于连接多个逻辑上分开的网络。对用户提供最佳的通信路径。

网页发展历程：

即：路由是桥梁，帮助需求方找到供给方，并进行交换。

路由项目实践

在 React 中使用路由可以通过第三方库 React Router 来实现。React Router 提供了一个路由器（Router）和多个不同类型的路由组件，可以方便地实现页面之间的跳转和管理。常用的路由组件有 Route、Link 和 Switch 等。其中，Route 用于定义具体的路由规则和对应的组件，Link 用于生成链接到指定路由的超链接，而 Switch 则用于在多个路由规则之间进行匹配，并渲染与当前 URL 匹配的第一个组件。

React Router 使用基本步骤如下：

  1. 安装 React Router：

    bashCopy Codenpm install react-router-dom --save

  2. 引入需要的路由组件：

    javascriptCopy Codeimport { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

  3. 在应用程序中添加 Router 组件：

    jsxCopy Code<Router>
  <div>
    {/* 在这里添加 Link 组件 */}
​
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  </div>
</Router>

    在这个例子中，Router 组件作为整个路由系统的容器，将所有内容包裹在其中。Switch 组件用于从多个路由规则中选择一个进行匹配和渲染。Route 组件定义了具体的路由规则，其中 path 属性表示匹配的 URL 路径，component 属性表示匹配成功后要渲染的组件。

  4. 在需要跳转的地方添加 Link 组件：

    jsxCopy Code<nav>
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/contact">Contact</Link></li>
  </ul>
</nav>

    在这个例子中，Link 组件会生成一个超链接，可以指向指定的 URL。to 属性指定了跳转目标的 URL。

React Router 项目实践

在 React 项目中使用 React Router 的步骤如下：

  1. 安装和引入 React Router：

    bashCopy Codenpm install --save react-router-dom

    javascriptCopy Codeimport { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

  2. 添加路由规则和组件：

    jsxCopy Code<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>
​
    <Switch>
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
      <Route exact path="/" component={Home} />
      <Route component={NoMatch} />
    </Switch>
  </div>
</Router>

    在这个例子中，我们使用 Route 组件来定义路由规则和对应的组件。其中，path 属性表示匹配的 URL 路径，component 属性表示匹配成功后要渲染的组件。

  3. 使用 Link 组件添加超链接：

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

    在这个例子中，Link 组件会生成一个超链接。to 属性指定了跳转目标的 URL。在点击该链接时，React Router 将自动触发路由匹配和对应组件的渲染过程。

以上就是基本的 React Router 实践流程。当然，在具体项目中还需要根据实际需求进行适当的调整和扩展。

好的，那我再进一步拓展一下。

嵌套路由

在 React Router 中，可以使用嵌套路由来管理子路由。嵌套路由是指将一组路由规则嵌套在另一组路由规则中的方式。例如，在一个电商网站中，可以将所有商品相关的页面都放在 /products 路径下，然后在该路由下再定义其他子路由，如 /products/list、/products/detail 等。

嵌套路由的实现需要在父级路由组件中添加子路由规则，使用 Route 组件包裹子路由对应的组件。例如：

jsxCopy Code<Route path='/products' component={Products}>
  <Route path='/products/list' component={ProductList} />
  <Route path='/products/detail/:id' component={ProductDetail} />
</Route>

在这个例子中，我们首先定义了一个 /products 路由规则，对应的组件是 Products。然后使用 Route 组件添加了两个子路由规则，分别是 /products/list 和 /products/detail/:id，对应的组件分别是 ProductList 和 ProductDetail。注意，子路由规则的 path 属性需要添加父级路由规则的路径前缀。

访问 URL 参数

在 React Router 中，可以通过 URL 参数来传递信息，例如在搜索页面输入关键词后，跳转到搜索结果页面，URL 中可以带上搜索关键词参数，如 /search?keywords=react。可以通过 this.props.location.search 获取 URL 参数。

另一种获取 URL 参数的方式是使用 React Router 提供的 match 对象。match 对象是一个包含路由参数信息的对象，包括：

  • params：一个键值对对象，包含所有 URL 参数的键值对。例如，在 /users/:id 路径中，如果访问了 /users/123，那么 params 对象将包含 { id: '123' }。
  • url：匹配的 URL 路径。
  • path：路由规则中定义的路径模板。例如，在 /users/:id 路径中，path 的值是 /users/:id。

可以在路由组件中通过this.props.match.params访问 URL 参数。例如，如果定义了一个路径为 /users/:id 的路由规则，那么可以在对应组件中通过 this.props.match.params.id 访问 ID 参数。

重定向

在 React Router 中，可以使用重定向来将不合法的 URL 地址自动重定向到另一个地址。例如，在用户访问某个不存在的页面时，可以将其重定向到网站首页。React Router 提供了 Redirect 组件来实现重定向。

jsxCopy Code<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Redirect from="/old-url" to="/new-url" />
  <Route component={NotFound} />
</Switch>

在这个例子中，我们使用 Redirect 组件将 /old-url 路径重定向到 /new-url。from 属性表示需要重定向的原始路径，to 属性表示重定向后的目标路径。

路由守卫

在某些情况下，我们需要根据用户的身份、权限等信息来限制其访问某些页面。React Router 提供了路由守卫（Route Guard）的机制来实现这一需求。路由守卫是钩子函数，在路由匹配时会被触发，可以通过它们来判断是否允许用户访问当前页面。

React Router 中的路由守卫包括三种：

  • Router 守卫：在整个应用程序中触发，比如在身份验证前检查用户是否已登录。
  • Route 守卫：在匹配某条具体路由规则时触发，比如在访问某个需要权限的页面时检查当前用户是否有相应的权限。
  • 组件守卫：在渲染某个路由对应的组件时触发，比如在访问某个需要管理员权限的组件时检查当前用户是否是管理员。

路由守卫可以通过 withRouter 高阶组件来实现。例如，如果要对 /admin 路由下所有页面进行权限控制，可以在 Admin 组件中定义一个路由守卫：

jsxCopy Codeimport { withRouter } from 'react-router-dom';
​
class Admin extends React.Component {
  componentWillMount() {
    if (!this.props.user.isAdmin) {
      this.props.history.push('/login');
    }
  }
​
  render() {
    return (
      <div>
        {/* 渲染其他组件 */}
      </div>
    );
  }
}
​
export default withRouter(Admin);

在这个例子中，我们使用 withRouter 将 Admin 组件包裹，然后在该组件的 componentWillMount 方法中判断当前用户是否是管理员。如果不是，则使用 history.push 方法将其重定向到登录页面。

以上就是 React Router 的一些进阶使用技巧。在实际项目中，需要根据具体情况选择合适的路由机制和配置。

avatar
文章
阅读
粉丝