-1

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

1
  • 1
    Please provide enough code so others can better understand or reproduce the problem.
    – Community Bot
    Oct 21, 2021 at 20:52

1 Answer 1

1

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.