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

Question

React 路由 V5 --

嗨，在这个嵌套反应路由中，我想在单击相应链接时单独显示资源页面内的第二个嵌套。现在它显示在 Products Id 页面中。另外，我正在为某些组件使用 { 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",
                       specification: "9W",
                   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",
                price: 39.56,
                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, Route, 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>
            );
            }




    

Answer 1

解决方案

1. 在Route中为productId添加exact，这样所有子路由都可以单独处理。

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

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

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

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

下面是修改后的codeandbox 和可行的解决方案。

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