App.js

import React from 'react';
import './App.css';
import Routes from './Routes'

class App extends React.Component {
  render() {
    return (
      <Routes />
    )
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Recipe.js

import React from 'react';

const findRecipe = (recipes, name) => {
  return recipes.find((recipe) => {
    return name === recipe.name
  })
}

const Recipe = (props) => {
  const { name } = props.match.params
  const recipe = findRecipe(props.recipes, name)
  console.log(recipe)
  return (
    <>
      <h1>{recipe.name}</h1>
      <h2>{recipe.cookingTime}</h2>
    </>
  )
}

export default Recipe;

RecipeList.js

import React from 'react';
import { Link } from 'react-router-dom'

const RecipeList = (props) => {
  const { recipes } = props
  return (
    <>
      {recipes.map((recipe, index) => {
        return <p key={index}><Link to={`/recipe/${recipe.name}`}>{recipe.name}</Link></p>
      })}
    </>
  )
}

export default RecipeList;

Routes.js

import React from 'react';
import './App.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import RecipeList from './RecipeList'
import Recipe from './Recipe'

class Routes extends React.Component {
  render() {
    const recipes = [
      {
        name: 'sandwich',
        cookingTime: '5 mins'
      },
      {
        name: 'pizza',
        cookingTime: '10 mins'
      }
    ]
    return (
      <BrowserRouter>
        <Switch>
          <Route path="/recipes" render={() => {
            return <RecipeList recipes={recipes}  />
          }} />
          <Route path="/recipe/:name" render={(props) => {
            return <Recipe match={props.match} recipes={recipes} />
          }} />
        </Switch>
      </BrowserRouter>
    )
  }
}

export default Routes;