如何使用React Hooks在不同的页面中显示嵌套路线？？

问题描述

反应路由V5-

嗨，在此嵌套的React路由中，当我单击相应的链接时，我想分别在资源页面中显示第二个嵌套。现在，它显示在“产品编号”页中。另外，我对某些组件使用{match}，是否还好或者是否需要更新..也许通过使用useParams，但是由于我对此知识的了解不多，所以不知道该怎么做。另外，我想知道如何在页面内部导航..是通过使用Navlink ..完成的吗？感谢您升级到以下任何代码。 CodeSandBox确实有帮助。

链接到-> Sandbox

我的代码如下：

       //DATA STRUCTURE
          const Data = [
                {
                 name: "LIGHT FITTINGS",id: "1",resources: [
                               {
                                id: "1a",title: "Bulb",specification: "9W",price: 29.9584,countInStock: 19
                                 },{
                               id: "2a",title: "Tube light",price: 39.56,countInStock: 24
                    }
                ]
        },{
         name: "SWITCH & SOCKETS",id: "2",resources: [
                          {
                           id: "1b",title: "Switch",specification: "6A",price: 16,countInStock: 15
                },{
            id: "2b",title: "Socket",specification: "16A",countInStock: 24
                }
                  ]
    }
       ];
        export default Data;



   //App.jsx

        import React from "react";
        import { browserRouter,Route,Switch } from "react-router-dom";
        import HomeScreen from "../screens/HomeScreen";
        import Products from "../screens/Products";


        function App() {
         return (
            <browserRouter>
                

            <div className="mainContent">
                  <Route path={"/product/:productId"} component={ProductId}/>                        
                  <Route path="/products" component={Products} />
                  <Route exact path="/" component={HomeScreen} />
            </div>
            </browserRouter>
            );
            }

        export default App;

   //Product
      import React from "react";
      import Data from "../Data";
      import { Link } from "react-router-dom";

      export default function Products() {
        return (
              <div>
                <h1>First page</h1>
                  <ul>
                    {Data.map(({ name,id }) => (
                     <li key={id}>
                       <Link to={`/product/${id}`}>{name}</Link>
                    </li>
                    ))}
                 </ul>
             </div>
                 );
             }



   //Product ID page
    import React from "react";
    import Data from "../Data";
    import { Link,useRouteMatch,Switch } from "react-router-dom";
    import Resource from "./Resource";

    export default function ProductId({ match }) {
        let { path,url } = useRoutematch();

     const productItem = Data.find(({ id }) => id === match.params.productId);
        return (
            <div>
                <h2>ProductId page</h2>
                <div>{productItem.name}</div>

                    <ul>
                    {productItem.resources.map((sub) => (
                   <li key={sub.id}>
                        <Link to={`${url}/${sub.id}`}>{sub.title}</Link>
                   </li>
                ))}
                </ul>
    
                <Route path={`${path}/:subId`} component={Resource} />
  
            </div>
         );
         }



    //Resource Page

        import React from "react";
        import Data from "../Data";
        //import { useParams,useRouteMatch } from "react-router-dom";

            export default function Resource({ match }) {
             //let match = useRoutematch();
            //let { subId } = useParams();

        const productItem = Data.find(({ id }) => id === match.params.productId)
                    .resources.find(({ id }) => id === match.params.subId);

        return (
                <div>
                    <h2>Resource Page</h2>
                        <h3>{productItem.title}</h3>
                        <h3>{productItem.price}</h3>
                        <a href={productItem.url}> More Info.</a>
                </div>
            );
            }




    

解决方法

解决方案

1. 在路由中为productId添加确切名称，以便可以分别处理所有子路由。

    <Route exact path={"/product/:productId"} component={ProductId}/> 
   

2. 创建一个指向subId的新路由。

    <Route path="/product/:productId/:subId" component={Resource} />
   

这应该可以解决您的问题。

下面是带有工作解决方案的修改后的代码和框。

https://codesandbox.io/s/routing-test-2-forked-k8p64?file=/src/components/App.jsx