App.js

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import Index from './routes/Index'
import Recipe from './routes/Recipe'
import Learn from './routes/Learn'
import Profile from './routes/Profile'
import Signup from './routes/Signup'
import Login from './routes/Login'

import LearnTemplate from './Templates/LearnTemplate'
import './components/LearnData/Cooks.json'
// import '../components/LearnData/Cookbooks.json'
// import '../components/LearnData/Tv_series.json'
// import '../components/LearnData/Websites.json'


function App() {
  return (
    <Router>
      <div className="super-nav-wrapper">
        <ul className="reg-nav">
          <li>
            <Link to="/signup/">Signup</Link>
          </li>
          <li>
            <Link to="/login/">Login</Link>
          </li>
        </ul>
        <nav>
         <ul className="main-nav">
           <li>
             <Link to="/">Home</Link>
           </li>
           <li>
             <Link to="/recipe/">Recipe</Link>
           </li>
           <li>
             <h1>LOCO</h1>
           </li>
           <li>
             <Link to="/learn/">Learn</Link>
           </li>
           <li>
             <Link to="/profile/">Profile</Link>
           </li>
         </ul>
       </nav>

       <div class="content">
         <Route path="/" exact component={Index} />
         <Route path="/recipe/" component={Recipe} />
         <Route path="/learn/" exact component={Learn} />
         <Route path="/learn/:learn_url_name" exact component={Learn} />
         // <Route path="/learn/cooks/:id" exact component={LearnTemplate} />
         // <Route path="/learn/Tv_series/:id" exact component={LearnTemplate} />
         // <Route path="/learn/Cookbooks/:id" exact component={LearnTemplate} />
         // <Route path="/learn/Websites/:id" exact component={LearnTemplate} />
         <Route path="/profile/" component={Profile} />
         <Route path="/signup/" component={Signup} />
         <Route path="/login/" component={Login} />

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

export default App;

Cooks.json

{
  "Cooks": [
    {
      "id": "1",
      "url": "http://localhost:3000/learn/Cooks/1",
      "name": "Max Mustermann",
      "cuisine": "Indian",
      "meal": "Dinner",
      "description": "Classic Indian dishes with a vegan twist"
    },
    {
      "id": "2",
      "url": "http://localhost:3000/learn/Cooks/2",
      "name": "Francesco Garibaldi",
      "cuisine": "Italian",
      "meal": "Lunch",
      "description": "Classic Italian dishes with a vegan twist"
    },
    {
      "id": "3",
      "url": "http://localhost:3000/learn/Cooks/3",
      "name": "Christophe Rosso",
      "cuisine": "French",
      "meal": "Breakfast",
      "description": "Classic French dishes with a vegan twist"
    },
    {
      "id": "4",
      "url": "http://localhost:3000/learn/Cooks/4",
      "name": "Franz Gustav",
      "cuisine": "German",
      "meal": "Dinner",
      "description": "Classic German dishes with a vegan twist"
    },
    {
      "id": "5",
      "url": "http://localhost:3000/learn/Cooks/5",
      "name": "Sergio Puta",
      "cuisine": "Spanish",
      "meal": "Lunch",
      "description": "Classic Spanish dishes with a vegan twist"
    },
    {
      "id": "6",
      "url": "http://localhost:3000/learn/Cooks/6",
      "name": "Marie Hammerfield",
      "cuisine": "American",
      "meal": "Breakfast",
      "description": "Classic American dishes with a vegan twist"
    }
  ]
}

index.js

		api.get('/learn/:learn_url_name', (req, res) => {
				const learn_url_name = req.query.learn_url_name;
				db.query('SELECT * FROM learn WHERE learn_url_name = ?', [learn_url_name] , (err, rows) => {
					res.json({learn: rows});
				})
		});

//This is the api router

init.sql

DROP TABLE IF EXISTS `learn`;
CREATE TABLE `learn` (
  `id` int(24) unsigned NOT NULL AUTO_INCREMENT,
  `learn_url_name` varchar(100) DEFAULT NULL,
  `learn_name` varchar(100) NOT NULL DEFAULT '',
  `learn_image` int(10) DEFAULT NULL,
  `lean_category_cuisine` varchar(100) NOT NULL DEFAULT '',
  `learn_category_meal` varchar(100) NOT NULL DEFAULT '',
  `learn_description` varchar(100) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

Learn.js

import React from 'react';
import axios from 'axios';
import LearnCard from '../components/Cards/LearnCard.js'


export default class Learn extends React.Component {

  componentDidMount () {
    const learn_url_name = this.props.match.params.learn_url_name
    axios({
      method: 'get',
      url: 'http://localhost:4000/api/learn/' + learn_url_name,
    }).then((response) => {
      console.log(response)
      //this.setState({ todos: response.data.todos });
    });
  }

  redirect = (learn_url_name) => {
    this.props.history.push('/learn/' + learn_url_name)
    }

  render() {
    return (
      <div>
        <div className="hove-centered">
          <LearnCard onClick={() => this.redirect("Cooks")} name="Cooks" image="https://via.placeholder.com/200x200"/>
          <LearnCard onClick={() => this.redirect("Websites")} name="Websites" image="https://via.placeholder.com/200x200"/>
          <LearnCard onClick={() => this.redirect("Tv-Series")} name="Tv-Series" image="https://via.placeholder.com/200x200"/>
          <LearnCard onClick={() => this.redirect("Cookbooks")} name="Cookbooks" image="https://via.placeholder.com/200x200"/>
        </div>
      </div>
    );
  }
}

LearnTemplate.js

import React from 'react';
import axios from 'axios';
import TemplateCard from '../components/Cards/TemplateCard'
import '../components/LearnData/Cooks.json'
// import '../LearnData/Cookbooks.json'
// import '../LearnData/Tv_series.json'
// import '../LearnData/Websites.json'

export default class LearnTemplate extends React.Component {



  render () {
    return (
      <div>
        <div className="filter verticalLine">
          <h4>Filter Options</h4>
          <hr />
          <hr />
          <p>Meal</p>
          <p>Cuisine</p>
        </div>
        <div className="TemplateCard">
          <TemplateCard onClick={() => this.redirect("")} name={this.props.name} description={this.props.description} image={this.props.image}/>
          <TemplateCard onClick={() => this.redirect("")} name={this.props.name} description={this.props.description} image={this.props.image}/>
          <TemplateCard onClick={() => this.redirect("")} name={this.props.name} description={this.props.description} image={this.props.image}/>
          <TemplateCard onClick={() => this.redirect("")} name={this.props.name} description={this.props.description} image={this.props.image}/>
          <TemplateCard onClick={() => this.redirect("")} name={this.props.name} description={this.props.description} image={this.props.image}/>
          <TemplateCard onClick={() => this.redirect("")} name={this.props.name} description={this.props.description} image={this.props.image}/>
        </div>
      </div>
    );
  }
}