React: How to use React Router to up navigate to other components?

1

I am wanting to use React router on my Recipe API App and so far I have my React router set up like this.

import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import Recipe from "./Recipe.js";
import RecipeInfo from "./RecipeInfo.js";
import "./styles.css";

export default function App() {
  const API_ID = "c38daf94";
  const API_KEY = "850d468a3e994692691631c7c259406c";

  const [recipes, setRecipes] = useState([]);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState();

  useEffect(() => {
    async function getRecipes() {
      const response = await fetch(
        `https://api.edamam.com/search?q=${query}&app_id=${API_ID}&app_key=${API_KEY}`
      );
      const data = await response.json();
      setRecipes(data.hits);
      console.log(data.hits);
    }
    if (query !== "") getRecipes();
  }, [query]);


  const updateRecipes = e => {
    setSearch(e.target.value);
  };

  const getSearch = e => {
    e.preventDefault();
    console.log(query)
    setQuery(search);
  };

  return (


    <div className="App">
      <input
        className="input"
        onChange={updateRecipes}
        value={search}
        type="text"
      />
      <button className="search" onClick={getSearch}>
        Search
      </button>
      <div className="recipes">
        {recipes.map(recipe => (
          <Recipe
            key={recipe.recipe.uri}
            title={recipe.recipe.label}
            calories={recipe.recipe.calories}
            image={recipe.recipe.image}
          />
        ))}
      </div>
      <Router>
        <Route
        exact path = "/recipeinfo"
        render={props => (
          <RecipeInfo
          {...props}

          />
        )}
        />
      </Router>
    </div>
  );
}

In my Recipe.js component it displays all the recipes and their information that is passed in through props from the state variable. What I want to be able to do is click on the <a> tag and navigate to a component called RecipeInfo.js where I want to display information through props. I am trying to implement React Router to do this? How exactly do I set this up?