时间戳

首页 > 解决方案 > 如何使 url 包含多个部分？反应

reactjs - 如何使 url 包含多个部分？反应

问题描述

如此全面的披露，我不确定如何正确地提出这个问题，但我确实有一个不错的例子。我正在制作一个 React 应用程序，并且我想我正在尝试使 url 更具“描述性”。

所以它从 Home 开始，然后我转到 Products 页面，并且 url 从 /home 更改为 /products。这部分很好。

当我想从产品页面转到特定产品时，我希望 url 更改为 /products/example 而不仅仅是 /example。我是否必须在链接中指定这一点，还是有一些更简洁的方法来完成它？

现在我唯一的答案是让链接转到 /product/example 并将 App.js 路由到相同的 url。我不知道如何正确地在谷歌搜索中问这个问题，所以我不得不在这里问。如果您知道如何具体表达我的要求，我也会很感激。

提前致谢。

标签： reactjs

解决方案

我相信example您的 URL/products/example中的 是您产品的产品名称。如果是这样，可以将产品名称作为 URL 参数使用react-router，或者react-router-dom如果您仍然没有。

通过将路线声明为

import { Switch, Route } from "react-router-dom";

const Router = () => (
    <Switch>
        <Route exact path="/home" component={()=>return <h1>Home</h1>} />
        <Route exact path="/products" component={()=>return <h1>Products</h1>} />
        <Route path="/products/:productName" component={props=>return <h1>props.match.params.productName</h1>} />
    </Switch>
);

export default Router;

更多关于这里

推荐阅读