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

React路由器V6:初学者指南

尊渡假赌尊渡假赌尊渡假赌
发布: 2025-02-08 11:33:11
原创
536 人浏览过

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,使路由易于实现。

>
<Route path="/about" element={<About />} />
登录后复制
登录后复制
>

重要说明:<Route>> React Router是由Remix软件维护的第三方库,而不是官方的Facebook/Meta产品。 <Route><Link>概述:

此教程封面:

>使用NPM设置React Router。

> 基本路由概念。

嵌套路由。

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

    实施受保护的路由。
  1. 完整的项目代码可在GitHub上获得(链接要在此处插入)。
  2. 设置React Router:
  3. >

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

    <Route path="/about" element={<About />} />
    登录后复制
    登录后复制

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

    node -v
    npm -v
    登录后复制
    安装React Router dom:

    npx create-react-app react-router-demo
    cd react-router-demo
    登录后复制
    启动开发服务器:

    npm install react-router-dom
    登录后复制
    您的React应用程序与React路由器现在正在运行

    >。 http://localhost:3000/

    React Router基础知识:>

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

    >用路由器包装主应用程序组件:>>>。

    (使用HTML5历史记录API)通常是清洁URL的首选:

    历史对象

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

    >链接和路由组件
    npm start
    登录后复制
    如果位置与路径匹配,则

    >

    呈现UI。

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

    这设置了基本的导航和路由。<Route> <Link>

    嵌套路由:

    App.js嵌套路由将

    组件放在其他
    // src/index.js
    import { BrowserRouter } from 'react-router-dom';
    // ...
    root.render(
      <React.StrictMode>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </React.StrictMode>
    );
    登录后复制
    >组件中。 这反映了嵌套的URL结构。

    修改

    创建

    <Route> <Route>

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

    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</Link></li>
              <li><Link to="/categories">Categories</Link></li>
              <li><Link to="/products">Products</Link></li>
            </ul>
          </nav>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/categories" element={<Categories />} />
            <Route path="/products" element={<Products />} />
          </Routes>
        </div>
      );
    }
    登录后复制
    >动态嵌套路由:>

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

    访问参数。
    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 path="/categories" element={<Categories />}>
              <Route path="desktops" element={<Desktops />} />
              <Route path="laptops" element={<Laptops />} />
            </Route>
            <Route path="/products/*" element={<Products />} /> {/* Note the trailing * */}
          </Routes>
        </div>
      );
    }
    登录后复制
    >

    > update<Outlet>

    参数使用

    >。

    *保护路线: useParams

    >使用

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

    >
    import { Link, Outlet } from 'react-router-dom';
    
    export const Categories = () => (
      <div>
        <h2>Categories</h2>
        <nav>
          <ul>
            <li><Link to="desktops">Desktops</Link></li>
            <li><Link to="laptops">Laptops</Link></li>
          </ul>
        </nav>
        <Outlet />
      </div>
    );
    
    export const Desktops = () => <h3>Desktop PC Page</h3>;
    export const Laptops = () => <h3>Laptops Page</h3>;
    登录后复制
    创建

    :productId Product useParams>添加一个

    组件,然后集成

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

    >

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

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

    > PrivateRoute.js

    摘要:
    // ... (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 index element={<p>Please select a product.</p>} />
        </Routes>
      </div>
    );
    
    // ... Product component ...
    登录后复制

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

    >

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板