React中如何实现一个唯一的link？

Question

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

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

例如：

<CocktailRecipe cocktailId={id} />

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

localhost/cocktail?=12345 （呈现 <CocktailRecipe cocktailId={12345} />

Answer 1

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

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

示例：

your_router.js

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

CocktailRecipe.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。

React中如何实现一个唯一的link？

How to realize a unique link in React?

reactjs

react-dom