如何使用 React Router DOM

php中文网 2024-10-15 11:41:52

介绍

欢迎来到我们关于 react router dom 的深入教程！如果您是一名 ui 开发人员，希望通过动态路由功能增强 react 应用程序，那么您来对地方了。 react router dom 是一个功能强大的库，允许您创建具有多个视图的单页面应用程序，同时保持流畅、无缝的用户体验。

在这份综合指南中，我们将引导您了解有关 react router dom 所需了解的所有内容，从基本概念到高级技术。无论您是 react 新手还是希望提高技能的经验丰富的开发人员，本教程都将为您提供在 react 应用程序中有效实现路由所需的知识和实际示例。

那么，让我们一起深入探索 react router dom 的世界吧！

react router dom 入门

什么是 react router dom？

react router dom 是 react 应用程序的流行路由库。它允许您在单页应用程序 (spa) 中创建动态的客户端路由。使用 react router dom，您可以根据当前 url 轻松管理不同的视图和组件，为您的用户提供无缝的导航体验。

安装 react router dom

开始在 react 应用程序中实现路由之前，我们需要安装 react router dom 包。打开终端并导航到项目目录，然后运行以下命令：

npm install react-router-dom

这将在您的项目中安装最新版本的 react router dom。

基本设置

要开始在应用程序中使用 react router dom，您需要导入必要的组件并使用 browserrouter 组件包装主应用程序组件。以下是如何在 index.js 文件中设置 react router dom 的基本示例：

import react from 'react';
import reactdom from 'react-dom';
import { browserrouter } from 'react-router-dom';
import app from './app';

reactdom.render(
  <browserrouter><app></app></browserrouter>,
  document.getelementbyid('root')
);

现在我们已经完成了基本设置，让我们探索 react router dom 的核心组件以及如何有效地使用它们。

react router dom 的核心组件

路线与路线

路由和路由组件是 react router dom 的构建块。它们允许您定义应为应用程序中的每个路线呈现的不同路径和组件。

这是如何使用这些组件的示例：

import react from 'react';
import { routes, route } from 'react-router-dom';
import home from './components/home';
import about from './components/about';
import contact from './components/contact';

function app() {
  return (
    <routes><route path="/" element="{&lt;home"></route>} /&gt;
      <route path="/about" element="{&lt;about"></route>} /&gt;
      <route path="/contact" element="{&lt;contact"></route>} /&gt;
    </routes>
  );
}

export default app;

在此示例中，我们定义了三个路由：主页（“/”）、关于页面（“/about”）和联系页面（“/contact”）。每个路由都与一个特定的组件相关联，当访问相应的 url 时，该组件将被渲染。

链接组件

link 组件用于在应用程序中创建导航链接。它是 react router dom 的重要组成部分，因为它允许用户在不同视图之间移动，而不会触发整个页面重新加载。

以下是如何使用链接组件：

import react from 'react';
import { link } from 'react-router-dom';

function navigation() {
  return (
    <nav><ul>
<li>
<link to="/">home</li>
        <li>
<link to="/about">about</li>
        <li>
<link to="/contact">contact</li>
      </ul></nav>
  );
}

export default navigation;

导航链接组件

navlink 组件与 link 类似，但它提供了用于设置活动链接样式的附加功能。这对于创建要突出显示当前活动页面的导航菜单特别有用。

这是如何使用 navlink 的示例：

import react from 'react';
import { navlink } from 'react-router-dom';

function navigation() {
  return (
    <nav><ul>
<li>
          <navlink to="/" style="{({" isactive> isactive ? { color: 'red' } : undefined}&gt;
            home
          </navlink>
</li>
        <li>
          <navlink to="/about" style="{({" isactive> isactive ? { color: 'red' } : undefined}&gt;
            about
          </navlink>
</li>
        <li>
          <navlink to="/contact" style="{({" isactive> isactive ? { color: 'red' } : undefined}&gt;
            contact
          </navlink>
</li>
      </ul></nav>
  );
}

export default navigation;

在此示例中，我们使用 isactive 属性将红色应用于活动链接。

高级路由技术

现在我们已经介绍了基础知识，让我们探索一些可以使用 react router dom 实现的更高级的路由技术。

嵌套路由

嵌套路由允许您在应用程序中创建更复杂的路由结构。这对于使用共享组件创建布局或组织相关路线特别有用。

这是如何实现嵌套路由的示例：

import react from 'react';
import { routes, route, outlet } from 'react-router-dom';
import header from './components/header';
import footer from './components/footer';
import home from './components/home';
import about from './components/about';
import services from './components/services';
import servicedetails from './components/servicedetails';

function layout() {
  return (
    <div>
      <header></header><outlet></outlet><footer></footer>
</div>
  );
}

function app() {
  return (
    <routes><route path="/" element="{&lt;layout"></route>}&gt;
        <route index element="{&lt;home"></route>} /&gt;
        <route path="about" element="{&lt;about"></route>} /&gt;
        <route path="services" element="{&lt;services"></route>} /&gt;
        <route path="services/:id" element="{&lt;servicedetails"></route>} /&gt;
      
    </routes>
  );
}

export default app;

在此示例中，我们创建了一个包含页眉和页脚的布局组件。 outlet 组件用于渲染布局内的子路由。

动态路由和 url 参数

动态路线允许您创建可以处理可变路段的灵活路径。这对于需要显示特定项目的详细信息（例如产品页面或用户个人资料）的场景非常有用。

以下是如何使用动态路由和访问 url 参数的示例：

import react from 'react';
import { useparams } from 'react-router-dom';

function productdetails() {
  const { productid } = useparams();

  return (
    <div>
      <h1>product details</h1>
      <p>you are viewing product with id: {productid}</p>
    </div>
  );
}

export default productdetails;

要使用此组件，您需要定义如下路由：

<route path="/products/:productid" element="{&lt;productdetails"></route>} /&gt;

程序化导航

有时您需要根据某些条件或用户操作以编程方式进行导航。 react router dom 为此提供了 usenavigate 钩子。

这是如何使用 usenavigate 的示例：

import react from 'react';
import { usenavigate } from 'react-router-dom';

function loginform() {
  const navigate = usenavigate();

  const handlesubmit = (event) =&gt; {
    event.preventdefault();
    // perform login logic here
    // if login is successful, navigate to the dashboard
    navigate('/dashboard');
  };

  return (

); } export default loginform;

处理路由参数和查询字符串

react router dom 提供了强大的工具来处理路由参数和查询字符串，允许您创建动态且灵活的路由解决方案。

路由参数

我们已经了解了如何通过 useparams 钩子使用路由参数。让我们通过一个更复杂的示例进一步探讨这一点：

import react from 'react';
import { useparams } from 'react-router-dom';

function blogpost() {
  const { category, postid } = useparams();

  return (
    <div>
      <h1>blog post</h1>
      <p>category: {category}</p>
      <p>post id: {postid}</p>
    </div>
  );
}

export default blogpost;

要使用此组件，您需要定义如下路由：

<route path="/blog/:category/:postid" element="{&lt;blogpost"></route>} /&gt;

这允许您创建像 /blog/technology/123 或 /blog/travel/456 这样的 url，并从 url 中动态提取类别和帖子 id。

查询字符串

查询字符串对于将可选参数传递给路由非常有用。 react router dom 提供了 usesearchparams 钩子来处理查询字符串。

这是如何使用 usesearchparams 的示例：

import react from 'react';
import { usesearchparams } from 'react-router-dom';

function productlist() {
  const [searchparams, setsearchparams] = usesearchparams();
  const category = searchparams.get('category');
  const sortby = searchparams.get('sortby');

  return (
    <div>
      <h1>product list</h1>
      <p>category: {category || 'all'}</p>
      <p>sort by: {sortby || 'default'}</p>
      <button onclick="{()"> setsearchparams({ category: 'electronics', sortby: 'price' })}&gt;
        filter electronics, sort by price
      </button>
    </div>
  );
}

export default productlist;

在此示例中，我们从查询字符串中读取类别和排序参数。我们还演示了如何使用 setsearchparams 函数更新查询字符串。

保护路由并处理身份验证

许多应用程序中的一个常见要求是根据用户身份验证状态保护某些路由。 react router dom 可以与您的身份验证逻辑结合使用来创建受保护的路由。

这是如何实现受保护路由的示例：

import react from 'react';
import { route, navigate } from 'react-router-dom';

function protectedroute({ element, isauthenticated, ...rest }) {
  return (
    <route element="{isauthenticated" : to="/login" replace></route>}
    /&gt;
  );
}

function app() {
  const [isauthenticated, setisauthenticated] = react.usestate(false);

  return (
    <routes><route path="/" element="{&lt;home"></route>} /&gt;
      <route path="/login" element="{&lt;login" setisauthenticated="{setisauthenticated}"></route>} /&gt;
      <protectedroute path="/dashboard" element="{&lt;dashboard"></protectedroute>}
        isauthenticated={isauthenticated}
      /&gt;
    </routes>
  );
}

export default app;

在此示例中，我们创建了一个 protectedroute 组件来检查用户是否经过身份验证。如果是，则渲染指定的元素；如果没有，它会将他们重定向到登录页面。

处理 404 页面和重定向

react router dom 可以轻松处理 404（未找到）页面并在必要时实现重定向。

404 页

要创建 404 页面，您可以在路由定义末尾使用 * 路径：

import react from 'react';
import { routes, route } from 'react-router-dom';
import home from './components/home';
import about from './components/about';
import notfound from './components/notfound';

function app() {
  return (
    <routes><route path="/" element="{&lt;home"></route>} /&gt;
      <route path="/about" element="{&lt;about"></route>} /&gt;
      <route path="*" element="{&lt;notfound"></route>} /&gt;
    </routes>
  );
}

export default app;

在此示例中，将为任何与定义的路径不匹配的路线渲染 notfound 组件。

重定向

有时您可能需要将用户从一条路线重定向到另一条路线。 react router dom 为此提供了 navigate 组件：

import react from 'react';
import { routes, route, navigate } from 'react-router-dom';
import home from './components/home';
import oldpage from './components/oldpage';
import newpage from './components/newpage';

function app() {
  return (
    <routes><route path="/" element="{&lt;home"></route>} /&gt;
      <route path="/old-page" element="{&lt;navigate" to="/new-page" replace></route>} /&gt;
      <route path="/new-page" element="{&lt;newpage"></route>} /&gt;
    </routes>
  );
}

export default app;

在此示例中，任何尝试访问 /old-page 的用户都会自动重定向到 /new-page。

通过代码分割优化性能

随着应用程序的增长，您可能希望实现代码分割以提高性能。 react router dom 与 react 的延迟加载功能配合得很好，允许您仅在需要时加载路由组件。

以下是如何使用 react router dom 实现代码分割的示例：

import React, { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

const Home = lazy(() =&gt; import('./components/Home'));
const About = lazy(() =&gt; import('./components/About'));
const Contact = lazy(() =&gt; import('./components/Contact'));

function App() {
  return (
    <suspense fallback="{&lt;div">Loading...}&gt;
      <routes><route path="/" element="{&lt;Home"></route>} /&gt;
        <route path="/about" element="{&lt;About"></route>} /&gt;
        <route path="/contact" element="{&lt;Contact"></route>} /&gt;
      </routes></suspense>
  );
}

export default App;

In this example, we're using React's `lazy` function to dynamically import our components. The `Suspense` component is used to show a loading indicator while the component is being loaded.

结论

恭喜！您现在已经完成了有关 react router dom 的综合教程。我们涵盖了从基本设置到嵌套路由、动态路由、身份验证和代码分割等高级技术的所有内容。有了这些知识，您就可以在 react 应用程序中实现强大的路由解决方案了。

记住，掌握 react router dom 的关键是练习。尝试在您自己的项目中实现这些概念，并且不要害怕尝试不同的路由结构和技术。随着您对 react router dom 越来越熟悉，您会发现它为创建动态且用户友好的 web 应用程序开辟了新的可能性。

以上就是如何使用 React Router DOM的详细内容，更多请关注php中文网其它相关文章！

本文地址： http://www.ipsmc.com/web/8507.html