架构师级别：使用 React Router 进行路由

gt lt router route 877 来源： 2024-10-23

作为架构师级开发人员，掌握 react router 对于在 react 应用程序中设计可扩展、可维护且高效的导航系统至关重要。本指南深入介绍如何利用 route、switch、link 和 navlink 等核心组件设置 react router，并探索高级路由技术，包括嵌套路由、动态路由、路由参数、路由防护和重定向。

react 路由器简介

react router 是一个功能强大的库，有助于创建具有动态和嵌套路由的单页应用程序（spa），使其成为现代 web 开发不可或缺的工具。

设置 react 路由器

首先，使用npm 或yarn 安装react router：

npm install react-router-dom

或

yarn add react-router-dom

路由、交换机、链接和 navlink 组件

react router 提供了几个用于定义路线和处理导航的基本组件。

路线组件

route 组件将 url 路径映射到特定组件。它允许根据当前 url 有条件地渲染组件。

示例：

import react from 'react';
import { browserrouter as router, route } from 'react-router-dom';
import home from './home';
import about from './about';

const app = () =&gt; (
  <router><route path="/" exact component="{home}"></route><route path="/about" component="{about}"></route></router>
);

export default app;

开关元件

switch 组件确保只渲染第一个匹配的路由。这可以防止多条路线同时渲染。

示例：

import react from 'react';
import { browserrouter as router, route, switch } from 'react-router-dom';
import home from './home';
import about from './about';
import notfound from './notfound';

const app = () =&gt; (
  <router><switch><route path="/" exact component="{home}"></route><route path="/about" component="{about}"></route><route component="{notfound}"></route></switch></router>
);

export default app;

链接组件

link 组件用于在应用程序中创建导航链接。与传统的锚标记不同，link 组件不会导致整个页面重新加载，从而保留了单页应用程序体验。

示例：

import react from 'react';
import { browserrouter as router, route, link } from 'react-router-dom';
import home from './home';
import about from './about';

const app = () =&gt; (
  <router><nav><link to="/">home
      <link to="/about">about
    </nav><route path="/" exact component="{home}"></route><route path="/about" component="{about}"></route></router>
);

export default app;

导航链接组件

navlink 组件基于活动路线扩展了 link 的附加样式功能。它对于创建具有活动状态样式的导航菜单很有用。

示例：

import react from 'react';
import { browserrouter as router, route, navlink } from 'react-router-dom';
import home from './home';
import about from './about';

const app = () =&gt; (
  <router><nav><navlink exact to="/" activeclassname="active">
        home
      </navlink><navlink to="/about" activeclassname="active">
        about
      </navlink></nav><route path="/" exact component="{home}"></route><route path="/about" component="{about}"></route></router>
);

export default app;

先进的路由技术

嵌套路由

嵌套路由允许创建具有子导航的复杂布局，这对于构建具有分层结构的可扩展应用程序至关重要。

示例：

import react from 'react';
import { browserrouter as router, route, switch, link, useroutematch } from 'react-router-dom';

const topic = ({ match }) =&gt; <h3>requested topic id: {match.params.topicid}</h3>;

const topics = () =&gt; {
  let { path, url } = useroutematch();
  return (
    <div>
      <h2>topics</h2>
      <ul>
<li>
          <link to="{`${url}/components`}">components
        </li>
        <li>
          <link to="{`${url}/props-v-state`}">props v. state
        </li>
      </ul>
<switch><route exact path="{path}"><h3>please select a topic.</h3>
        </route><route path="{`${path}/:topicid`}" component="{topic}"></route></switch>
</div>
  );
};

const app = () =&gt; (
  <router><div>
      <ul>
<li>
          <link to="/">home
        </li>
        <li>
          <link to="/topics">topics
        </li>
      </ul>
<switch><route exact path="/"><h2>home</h2>
        </route><route path="/topics" component="{topics}"></route></switch>
</div>
  </router>
);

export default app;

动态路由

动态路由对于基于动态参数（例如用户 id 或产品 id）创建路由至关重要。它允许灵活且可扩展的应用程序架构。

示例：

import react from 'react';
import { browserrouter as router, route, switch, link } from 'react-router-dom';

const user = ({ match }) =&gt; <h3>user id: {match.params.userid}</h3>;

const app = () =&gt; (
  <router><div>
      <ul>
<li>
          <link to="/user/1">user 1
        </li>
        <li>
          <link to="/user/2">user 2
        </li>
      </ul>
<switch><route path="/user/:userid" component="{user}"></route></switch>
</div>
  </router>
);

export default app;

路由参数

路由参数允许从 url 捕获值以在组件中使用。此功能增强了应用程序的动态特性。

示例：

import react from 'react';
import { browserrouter as router, route, switch, link } from 'react-router-dom';

const product = ({ match }) =&gt; <h3>product id: {match.params.productid}</h3>;

const app = () =&gt; (
  <router><div>
      <ul>
<li>
          <link to="/product/101">product 101
        </li>
        <li>
          <link to="/product/202">product 202
        </li>
      </ul>
<switch><route path="/product/:productid" component="{product}"></route></switch>
</div>
  </router>
);

export default app;

路由守卫和重定向

保护路线

路由防护根据条件（例如用户身份验证）限制对某些路由的访问，确保应用程序内的安全访问控制。

示例：

import react from 'react';
import { browserrouter as router, route, redirect } from 'react-router-dom';

const isauthenticated = false;

const privateroute = ({ component: component, ...rest }) =&gt; (
  <route render="{(props)">
      isauthenticated ? <component></component> : <redirect to="/login"></redirect>
    }
  /&gt;
);

const dashboard = () =&gt; <h3>dashboard</h3>;
const login = () =&gt; <h3>login</h3>;

const app = () =&gt; (
  <router><div>
      <privateroute path="/dashboard" component="{dashboard}"></privateroute><route path="/login" component="{login}"></route>
</div>
  </router>
);

export default app;
</route>

在 react router 中实现重定向

以编程方式将用户重定向到不同的路线，通过根据上下文将他们引导到适当的内容来增强用户体验。

示例：

import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';

const OldPage = () =&gt; <h3>Old Page (will redirect)</h3>;
const NewPage = () =&gt; <h3>New Page</h3>;

const App = () =&gt; (
  <router><switch><route path="/old-page"><redirect to="/new-page"></redirect></route><route path="/new-page" component="{NewPage}"></route></switch></router>
);

export default App;

在此示例中，访问 /old-page 会自动将用户重定向到 /new-page。

结论

掌握 react router 对于在 react 应用程序中设计强大且可扩展的导航系统至关重要。了解如何设置路由，使用 route、switch、link 和 navlink 等核心组件，以及实现嵌套路由、动态路由、路由参数和路由防护等高级技术，将使您能够创建复杂的单页应用程序。作为架构师级开发人员，您设计可扩展路由架构的能力将显着提高应用程序的可维护性和效率，引导您的团队成功实施项目。

上一篇：常用的 Javascript 数组方法

下一篇：部署 React 应用程序：GitHub 页面使用指南