如何根据输入道具将 React 组件链接到唯一的 URL？

Question

I'm making a recipe website in React and trying to link each recipe to a unique URL.

I have a database with recipes, and one of them renders as a <Recipe/> component, based on which button is clicked (These buttons are automatically generated as well).

import Recipe from './recipe.js'
import Recipes from '../data/recipes.js'

export default function Main(){
    const [currentRecipe, setCurrentRecipe] = React.useState(<div></div>)
    //Below generates all buttons for all recipes available, with corresponding parameter for function call
    const allButtons = Recipes.map(recipe => {
        return(
            <button className="recipeButton" onClick={()=>RenderRecipe(recipe.Name)}>{recipe.Name}</button>
        )
    })
    //Below function then generates a recipe based on which button was clicked
    function RenderRecipe(recipeName){
        Recipes.map(recipe => {
            if (recipe.Name===recipeName){
                const newRecipe = 
                <Recipe 
                    name={recipe.Name}
                    ingredients={recipe.Ingredients} 
                    instructions={recipe.Instructions} 
                    numberOfPeople={8}
                 />
                setCurrentRecipe(newRecipe)
                
            }
        })
    }
    return (
        <div> 
            {allButtons} 
            {currentRecipe}
        </div>
    )
}

The recipe display is working, but everything is happening on the same URL, and I want users to be able to bookmark recipes in their browser and go back and forth between recipes. Is there a way to do something like the following:

'pancakesbutton'.onclick("render the pancakes <Recipe/> & change URL to index.html/pancakes)"

(preferably in a way that the website knows that index.html/pancakes should display the pancakes recipe)

I've looked into react-router-dom, but it seems that it requires you to make separate files for every recipe. Is there a way to avoid that?

Thanks in advance!

Answer 1

You can move the actual recipe display to a different component and you can define all recipe routes to that component. So based on the URL path you can write the logic of displaying corresponding recipes.

<Route exact path={["/pancakes", "/another-recipe"]}>
  <RecipeComponent />
</Route>