实习生级别：使用 React Router 进行路由

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签路由

路由是构建现代 web 应用程序的一个关键方面。 react router 是一个功能强大的库，允许您在 react 应用程序中处理路由。本指南将向您介绍 react router，涵盖基本设置和使用，以及高级路由技术和路由防护。

react 路由器简介

react router 可以在 react 应用程序中的不同组件之间进行导航，允许您创建具有多个视图的单页面应用程序。

设置 react 路由器

要开始使用 react router，您需要将其安装到您的项目中。您可以使用 npm 或yarn 来完成此操作。

npm install react-router-dom

或

yarn add react-router-dom

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

react router 提供了几个组件来定义路由和处理导航。

路线组件

route 组件用于在应用程序中定义路由。它指定了路径以及路径匹配时应该渲染的组件。

示例：

import react from 'react';import { browserrouter as router, route } from 'react-router-dom';import home from './home';import about from './about';const app = () =&gt; {  return (    <router><route path="/" exact component="{home}"></route><route path="/about" component="{about}"></route></router>  );};export default app;

本例中，当路径为 / 时会渲染 home 组件，当路径为 /about 时会渲染 about 组件。

开关元件

switch 组件确保一次只渲染一条路线。它渲染与当前 url 匹配的第一个 route。

示例：

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; {  return (    <router><switch><route path="/" exact component="{home}"></route><route path="/about" component="{about}"></route><route component="{notfound}"></route></switch></router>  );};export default app;

在本例中，如果没有路由匹配，将渲染 notfound 组件。

链接组件

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; {  return (    <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; {  return (    <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;

在此示例中，activeclassname 属性用于将活动类应用到与当前路由匹配的链接。

先进的路由技术

嵌套路由

嵌套路由允许您在其他路由中创建路由。这对于创建带有子导航的布局很有用。

示例：

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;

在此示例中，用户组件使用作为路由参数传递的用户 id 进行渲染。

路由参数

路由参数允许您从 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;

在本例中，product组件使用productid路由参数来显示产品id。

路由守卫和重定向

路由防护和重定向可帮助您根据条件（例如用户身份验证）控制对某些路由的访问。

保护路线

为了保护路由，您可以创建一个高阶组件（hoc），在渲染组件之前检查条件（例如，用户身份验证）。

示例：

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>

在此示例中，privateroute 组件在渲染 dashboard 组件之前检查用户是否经过身份验证。如果用户未通过身份验证，他们将被重定向到登录组件。

在 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 应用程序至关重要。通过掌握设置路由、使用 link 和 navlink 处理导航的基础知识，以及实现嵌套路由、动态路由、路由参数和路由防护等高级技术，您可以在应用程序中创建无缝且安全的导航体验。随着您不断发展自己的技能，这些概念将成为您使用 react 构建复杂的单页应用程序的能力的基础。

文章推荐