首页 >web前端 >js教程 >React路由器V6：初学者指南

React路由器V6：初学者指南

尊渡假赌尊渡假赌尊渡假赌原创: 2025-02-08 11:33:11457浏览

React Router v6: A Beginner's Guide

>本教程提供了一个综合指南，用于React Router V6，这是用于React应用程序的领先路由库。了解如何在您的React项目中有效管理URL和导航。>

密钥学习点：

掌握React路由器v6：本指南涵盖了在您的React应用程序中设置和使用React Router V6进行无缝导航和URL管理的基础。路由导航和渲染：
，和等核心组件创建动态和嵌套路由，包括将路径参数用于灵活路由。 <route></route>><link>高级路由技术：
的程序化导航以及React Rouyter v6.4中的最新增强功能，使您能够为现代React应用程序构建复杂的路由解决方案。 useNavigate

React在具有多个视图（页面）的构建动态Web应用程序方面表现出色。与传统的多页应用程序不同，导航不应重新加载整个页面。相反，视图应在现有页面中顺利进行。 React路由器声明地实现了这一目标，从而确保了无缝的用户体验。用户期望：每个视图的

唯一的URL：

允许书签（例如，

>功能性返回/前向按钮：www.example.com/products标准浏览器导航应按预期工作。
>嵌套视图的URL：支持动态，嵌套结构（例如，
通过指定所需的路由结构： React路由器的声明方法简化了路由： example.com/products/shoes/101

>，

和其他React路由器API，使路由易于实现。

<code class="language-jsx"><route path="/about" element="{<About"></route>} /></code>

重要说明：<route></route>> React Router是由Remix软件维护的第三方库，而不是官方的Facebook/Meta产品。 <route></route><link>概述：

此教程封面：

>使用NPM设置React Router。

> 基本路由概念。

嵌套路由。

带有路径参数的动态嵌套路由。

完整的项目代码可在GitHub上获得（链接要在此处插入）。
设置React Router：

>您需要安装node.js。如果没有，请从官方Node.js网站下载。考虑使用版本管理器进行更轻松的node.js管理。 NPM（Node Package Manager）与node.js捆绑在一起。验证安装：

<code class="language-jsx"><route path="/about" element="{<About"></route>} /></code>

>使用Create React App：创建一个新的React项目：

<code class="language-bash">node -v
npm -v</code>

安装React Router dom：

<code class="language-bash">npx create-react-app react-router-demo
cd react-router-demo</code>

启动开发服务器：

<code class="language-bash">npm install react-router-dom</code>

您的React应用程序与React路由器现在正在运行

>。 http://localhost:3000/

React Router基础知识：>

我们将创建一个具有三个视图的应用程序：家庭，类别和产品。> 路由器组件

>用路由器包装主应用程序组件：>>>。（使用HTML5历史记录API）通常是清洁URL的首选：

历史对象

BrowserRouter每个路由器都会创建一个管理导航堆栈的历史记录对象。更改位置触发重新渲染。 HashRouter（挂钩）为程序化导航提供了BrowserRouter函数。

>链接和路由组件

<code class="language-bash">npm start</code>

如果位置与路径匹配，则

>

呈现UI。

提供导航，而没有页面重新加载。useNavigate navigate> update

：

这设置了基本的导航和路由。<route></route> <link>

嵌套路由：

App.js嵌套路由将

组件放在其他

<code class="language-jsx">// src/index.js
import { BrowserRouter } from 'react-router-dom';
// ...
root.render(
  <react.strictmode>
    <browserrouter>
      <app></app>
    </browserrouter>
  </react.strictmode>
);</code>

>组件中。这反映了嵌套的URL结构。

修改

：

创建

：<route></route> <route></route>

App.js组件在父路线中呈现子路由。>

<code class="language-jsx">import { Link, Route, Routes } from 'react-router-dom';
// ... component definitions for Home, Categories, Products ...
export default function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
<link to="/">Home</li>
          <li>
<link to="/categories">Categories</li>
          <li>
<link to="/products">Products</li>
        </ul>
      </nav>
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/categories" element="{<Categories"></route>} />
        <route path="/products" element="{<Products"></route>} />
      </routes>
    </div>
  );
}</code>

>动态嵌套路由：>

>使用路径参数创建动态路由。将尾随的Categories.js添加到父路线，以允许子路由。使用

访问参数。

<code class="language-jsx">import { Link, Route, Routes } from 'react-router-dom';
import { Categories, Desktops, Laptops } from './Categories'; // Import nested route components

// ... other components ...

export default function App() {
  return (
    <div>
      {/* ... navigation ... */}
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/categories" element="{<Categories"></route>}>
          <route path="desktops" element="{<Desktops"></route>} />
          <route path="laptops" element="{<Laptops"></route>} />
        
        <route path="/products/*" element="{<Products"></route>} /> {/* Note the trailing * */}
      </routes>
    </div>
  );
}</code>

> update<outlet></outlet>：

参数使用

>。

*保护路线： useParams

>使用

进行程序化重定向并创建一个自定义Products.js组件。

<code class="language-jsx">import { Link, Outlet } from 'react-router-dom';

export const Categories = () => (
  <div>
    <h2>Categories</h2>
    <nav>
      <ul>
        <li>
<link to="desktops">Desktops</li>
        <li>
<link to="laptops">Laptops</li>
      </ul>
    </nav>
    <outlet></outlet>
  </div>
);

export const Desktops = () => <h3>Desktop PC Page</h3>;
export const Laptops = () => <h3>Laptops Page</h3>;</code>

创建

：:productId Product useParams>添加一个

组件，然后集成

到中以保护>路由。请记住原始响应中提到的安全考虑。

useNavigate React Router V6.4及以后：PrivateRoute>

> React Router V6.4引入了数据加载和突变API（受到混音的启发）。这些API使用加载程序和操作简化了路线内的数据获取和管理。本节将需要一个单独的，更详细的说明。

> PrivateRoute.js

摘要：

<code class="language-jsx">// ... (import statements and productData) ...

const Products = () => (
  <div>
    <h2>Products</h2>
    <ul> {/* ... linkList (generated from productData) ... */} </ul>
    <routes>
      <route path=":productId" element="{<Product" data="{productData}"></route>} />
      <route index element="{<p">Please select a product.} />
    </route></routes>
  </div>
);

// ... Product component ...</code>

>本教程提供了React Router V6的全面概述，涵盖了基本和高级路由概念。请记住要查阅官方的React Router文档以获取最新信息和详细信息。

以上是React路由器V6：初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！

html5 npm Object if for date using protected JS function dom this location history github http ui Access router Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Build Lightning Fast Surveys with Next.js and SurveyJS下一篇：View Transitions in Astro

查看更多