reactjs - 如何使用 React Hooks 在不同页面中显示嵌套路由..?
问题描述
反应路由 V5 --
嗨,在这个嵌套反应路由中,当我单击相应的链接时,我想单独显示资源页面内的第二个嵌套。现在它显示在 Products Id页面中。另外,我正在为某些组件使用 { match },它很好还是需要更新..也许通过使用 useParams,但由于我对它的了解落后,所以不知道该怎么做。另外,我想知道如何在页面内导航.. 是否使用 Navlink 完成..?我将感谢升级到以下任何代码。CodeSandbox 真的很有帮助。
链接到 ->沙盒
我的代码如下:
//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>
);
}
解决方案
解决方案
在 Route 中为 productId 添加精确,以便可以单独处理所有子路由。
<Route exact path={"/product/:productId"} component={ProductId}/>
创建一个指向 subId 的新 Route。
<Route path="/product/:productId/:subId" component={Resource} />
这应该可以解决您的问题。
以下是带有工作解决方案的修改后的代码框。
https://codesandbox.io/s/routing-test-2-forked-k8p64?file=/src/components/App.jsx
推荐阅读
- python - Windows 10 资源管理器文件打开对话框:文件名在已编译的可执行文件中消失
- amazon-sqs - 如何在 Mass Transit 中为不同环境分离 SQS 队列?
- python - 如何在 QGraphicsView 中绘制折线(“开放多边形”)
- javascript - Express:如果 HTML 表单发布请求失败,我如何在同一个 HTML 页面上显示错误?
- python - Django - 有没有办法在我的项目的 signals.py 文件中获取当前登录的用户?
- vue.js - Vue 中的 setInterval() 使我的 this 变量未定义
- flutter - Flutter:如何将此导入的 CSV 数据转换为 Map
纬度和经度? - c# - 使用 Windows 身份验证对 ASP.NET Core 基于角色的授权进行故障排除
- javascript - 如何在使用 JS 结束第一首曲目后自动播放另一首曲目?
- sql - 查找不存在的第一个可用值