React Router: How to pass in props to route component

1

I am making a Recipe API App where I need to pass information about a recipe into another component through props. In my Recipe component it displays the title, image , and calories as such:

import React from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import RecipeInfo from "./RecipeInfo";
export default function Recipe({ title, calories, image }) {
  return (
    <>
    <Router>
      <Link to="/recipeinfo"><h1>{title}</h1></Link>
      <Switch>
        <Route exact path ="/recipeinfo">
          <RecipeInfo />
        </Route>
      </Switch>
    </Router>
  
      <p>{Math.round(calories)} calories</p>
      <img src={image} alt="" />
    </>

What I want to be able to do is when I click on the link to navigate to RecipeInfo component where it can display information for that specific recipe. I am wanting to pass props like the title and image in that component

2 
<RecipeInfo title={title}  image={image}  />

It’s just a component that you’ve defined, just pass it props normally