了解React中的嵌套路由

该教程使用React路由器在反应应用中演示了嵌套路由。 我们将构建一个简单的网站来说明概念和实现。

>

理解嵌套路由

>进入代码之前，让我们检查网站的结构。 主要导航包括指向主页，仪表板和产品部分的链接。 主页和仪表板具有简单的路由（/home，/dashboard）。 但是，“产品”部分利用嵌套路线进行更好的组织。 在产品部分中，我们将有用于搜索，查看产品列表，添加新产品以及查看单个产品详细信息的路线。 这些嵌套的路线将在/products>下结构，从而导致/products/add>，/products/all和/products/search。

等路径

> 设置项目

>

>我们将使用一个项目结构，其中包括在文件夹中组织的组件。 创建以下文件：

• Home.js，Dashboard.js（在Acomponents文件夹中）
>
• Products.js，AddProduct.js，ProductsList.js，SingleProduct.js，ProductSearch.js（全部在acomponents/products>文件夹中）。

安装React Router

>

安装必要的软件包：npm install react-router-dom

>在app.js

中实现路由

App.js文件将包含主要路由配置。 首先，导入必要的组件：

import { BrowserRouter as Router, Link, Routes, Route } from "react-router-dom";
import "./App.css";
import Home from "./components/Home";
import Products from "./components/products/Products";
import Dashboard from "./components/Dashboard";
import ProductsSearch from "./components/products/ProductsSearch";
import AddProduct from "./components/products/AddProduct";
import SingleProduct from "./components/products/SingleProduct";
import ProductsList from "./components/products/ProductsList";

接下来，定义App组件中的路由：>>>>

function App() {
  return (
    <router>
      <nav>
        <link to="/">Home
        <link to="/dashboard">Dashboard
        <link to="/products/search">Products
      </nav>
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/dashboard" element="{<Dashboard"></route>} />
        <route path="/products" element="{<Products"></route>}>
          <route path="search" element="{<ProductsSearch"></route>} />
          <route path="list" element="{<ProductsList"></route>} />
          <route path="add" element="{<AddProduct"></route>} />
          <route path=":id" element="{<SingleProduct"></route>} />
        
      </routes>
    </router>
  );
}

export default App;

请注意，如何将

的嵌套路线定义为路线的子女。 这创建了嵌套的结构。 /products路由中的/products参数允许基于产品ID的动态路由。:id SingleProduct

>动态路由和数据获取

>

组件可能需要基于

>参数获取数据。 您可以使用SingleProduct>的钩子访问此参数。 请记住用您的实际数据获取机制替换示例数据。id useParamsreact-router-dom结论

本教程提供了一个在React中嵌套路由的实践示例。 通过仔细构建路线，您可以创建井井有条且可维护的反应应用程序。 可以对完整的源代码（尽管此处不包含在这里）进行调整和扩展以适合您的特定需求。 请记住要查阅React路由器文档以获取更高级的功能和选项。>

以上是了解React中的嵌套路由的详细内容。更多信息请关注PHP中文网其他相关文章！