时间戳

首页 > 解决方案 > 如何在 React 中实现一个独特的链接？

reactjs - 如何在 React 中实现一个独特的链接？

问题描述

我从鸡尾酒数据库中获取数据，每种鸡尾酒都有自己的 ID。（例如 12345）

在将鸡尾酒配方 {cocktailId} 呈现为道具的组件内部。

例如：

<CocktailRecipe cocktailId={id} />

我想实现“分享鸡尾酒”功能，并生成这样的链接：

localhost/cocktail?=12345（渲染<CocktailRecipe cocktailId={12345} />

标签： reactjsreact-dom

解决方案

需要更多信息，但我认为您正在使用 react-router。

你可以使用这个：https ://reactrouter.com/web/api/Route/path-string-string

例子：

your_router.js

...
<Route path="/cocktail/:id">
    <CocktailRecipe />
</Route>
...

鸡尾酒配方.jsx


import {useLocation} from "react-router-dom";


const CocktailRecipe = () => {
    
    const location = useLocation(); // {pathname: '/cocktail/1234', search: '', hash: '', state: undefined}
    const id = location.pathname.split("/")[2];
    
    return <p>My id is: {id}</p>
    
};

那是在你去 url 的情况下/cocktail/1234。

推荐阅读