How to realize a unique link in React?

Question

I am getting data from a cocktail database, each cocktail has its own ID. (For example 12345)

Inside the component that renders the cocktail recipe {cocktailId} as prop.

For example:

<CocktailRecipe cocktailId={id} />

I want to realize "share cocktail" function, and generate link like that:

localhost/cocktail?=12345 (Renders <CocktailRecipe cocktailId={12345} />

Please provide enough code so others can better understand or reproduce the problem. — Community, Oct 21 '21 at 20:52

score 1 · Accepted Answer · answered Oct 21 '21 at 22:30

Need more info, but I think you are using react-router.

You can use this: https://reactrouter.com/web/api/Route/path-string-string

Example:

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>
    
};

That's in case you go to the url /cocktail/1234.

How to realize a unique link in React?

1 Answers1