英文:
React Router: Issue with URL redirection in nested components
问题
我在我的React应用中使用React Router（v5.3.4）时遇到了一个URL重定向的问题。当我点击一个产品时，我会被重定向到产品页面，URL看起来像这样：“http://localhost:3000/product/34”。
然而，当我从该页面点击一个相关的产品时，它不是更新URL为“http://localhost:3000/product/35”，而是将新URL附加到现有的URL上，导致了“http://localhost:3000/product/34/product/35”。
我尝试了一些解决方案，包括使用React Router的Link组件，修改URL使用window.location.href，以及使用useNavigate钩子，但都没有解决这个问题。
以下是来自我的Product组件的相关代码片段：
import React from 'react';
import { Link } from 'react-router-dom';
const Product = ({ product }) => {
return (
<Link to={`product/${product.id}`}>
{/* 产品内容 */}
</Link>
);
};
export default Product;
我还尝试通过修改Link组件的to属性，仅使用产品ID来排查问题：
import React from 'react';
import { Link } from 'react-router-dom';
const Product = ({ product }) => {
return (
<Link to={`${product.id}`}>
{/* 产品内容 */}
</Link>
);
};
export default Product;
现在，当我点击相关产品时，URL变成了“http://localhost:3000/product/34/35”，而不是最初的“http://localhost:3000/product/34/product/35”。
是否有人能提供一些建议或替代方法？
英文:
I'm facing an issue with URL redirection in my React app using React Router (v5.3.4). When I click on a product, I'm redirected to the product's page with a URL like "http://localhost:3000/product/34".
However, when I click on a related product from that page, instead of updating the URL to "http://localhost:3000/product/35",
it appends the new URL to the existing one, resulting in "http://localhost:3000/product/34/product/35".
I've tried a few solutions including using Link component from React Router, modifying the URL using window.location.href, and utilizing the useNavigate hook, but none of them have resolved the issue.
Here's the relevant code snippet from my Product component:
import React from 'react';
import { Link } from 'react-router-dom';
const Product = ({ product }) => {
return (
<Link to={`product/${product.id}`}>
{/* Product content */}
</Link>
);
};
export default Product;
I also tried to troubleshoot the problem by modifying the code to use only the product ID in the to attribute of the Link component:
import React from 'react';
import { Link } from 'react-router-dom';
const Product = ({ product }) => {
return (
<Link to={`${product.id}`}>
{/* Product content */}
</Link>
);
};
export default Product;
Now, when I click on a related product, the URL becomes "http://localhost:3000/product/34/35" instead of "http://localhost:3000/product/34/product/35" as it was initially.
Could anyone provide any guidance/suggestions or alternative approaches?
答案1
得分: 1
使用绝对路径，例如以前导的 "/" 字符开头，以确保新路径不会作为相对链接附加到当前URL路径。
示例：
const Product = ({ product }) => {
return (
<Link to={`/product/${product.id}`}>
{/* 产品内容 */}
</Link>
);
};
import { Link, generatePath } from 'react-router-dom';
const Product = ({ product }) => {
return (
<Link to={generatePath("/product/:productId", { productId: product.id })}>
{/* 产品内容 */}
</Link>
);
};
英文:
Use an absolute path, e.g. one that starts with a leading "/" character so the new path is not appended to the current URL path as a relative link.
Examples:
const Product = ({ product }) => {
return (
<Link to={`/product/${product.id}`}>
{/* Product content */}
</Link>
);
};
import { Link, generatePath } from 'react-router-dom';
const Product = ({ product }) => {
return (
<Link to={generatePath("/product/:productId", { productId: product.id })}>
{/* Product content */}
</Link>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论