Hi, I need your help with React Router. I have defined paths to various components and when I click a button to redirect me to those it works. However, when I click on navigation menu items the page reloads and does not redirect me to the components that I defined in switch component. Do you happen to know what is the cause of this bahaviour? Thanks in advance 
App component: - paths to Base, Home, Toppings and Order work but the rest does not
import React, { useState } from 'react';
import { Route, Switch, useLocation } from "react-router-dom";
import Home from './components/Home';
import Base from './components/Base';
import Toppings from './components/Toppings';
import Order from './components/Order';
import Menu from './components/Menu';
import Gallery from './components/Gallery';
import Contact from './components/Contact';
import { AnimatePresence} from 'framer-motion';
function App() {
// get information about the current route location, whenever route changes it will update the information stored in this constant
// we have to pass this information to switch component and it will understnand when rout changes and what
// that to do with exit animation
const location = useLocation();
const [pizza, setPizza] = useState({ base: "", toppings: [] });
const addBase = (base) => {
setPizza({ ...pizza, base })
}
const addTopping = (topping) => {
let newToppings;
if(!pizza.toppings.includes(topping)){
newToppings = [...pizza.toppings, topping];
} else {
newToppings = pizza.toppings.filter(item => item !== topping);
}
setPizza({ ...pizza, toppings: newToppings });
}
return (
<>
<AnimatePresence exitBeforeEnter>
<Switch location={location} key={location.key}>
<Route path="/base">
<Base addBase={addBase} pizza={pizza} />
</Route>
<Route path="/toppings">
<Toppings addTopping={addTopping} pizza={pizza} />
</Route>
<Route path="/order">
<Order pizza={pizza} />
</Route>
<Route path="/">
<Home />
</Route>
<Route path="/menu">
<Menu />
</Route>
<Route path="/gallery">
<Gallery />
</Route>
<Route path="contact">
<Contact />
</Route>
</Switch>
</AnimatePresence>
</>
);
}
export default App
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter as Router} from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Navigation component: when you click link elements the page reloads and does not redirect to the components defined in switch
import React from 'react';
import '../styles/navigation_styles.css';
import home from '../images/house.svg';
import contacts from '../images/contacts.svg';
import menu from '../images/menu.svg';
import gallery from '../images/gallery.svg';
import {Link} from 'react-router-dom';
import {motion} from 'framer-motion';
const navigationContainerVariants = {
animateFrom :{
bottom:-300
},
animateTo:{
bottom:0,
transition:{delay:2.5}
}
}
const navigationElementVariants = {
hover:{
backgroundColor:"#f7dbb4",
borderRadius:"10px",
transition: {
duration: 0.5,
}
}
}
function Navigation(){
return(
<>
<nav>
<motion.div variants={navigationContainerVariants} initial="animateFrom" animate="animateTo" className="navigation-component">
<ul className="nav-style">
<Link to="/" style={{ textDecoration: 'none'}}>
<motion.li variants={navigationElementVariants} whileHover="hover" className="nav-element-style"><img className="icon-nav-style" src={home} alt="Home" />Home page</motion.li>
</Link>
<Link to="/menu" style={{ textDecoration: 'none'}}>
<motion.li variants={navigationElementVariants} whileHover="hover" className="nav-element-style"><img className="icon-nav-style" src={menu} alt="Menu"/>Menu</motion.li>
</Link>
<Link to="/gallery" style={{ textDecoration: 'none'}}>
<motion.li variants={navigationElementVariants} whileHover="hover" className="nav-element-style"><img className="icon-nav-style" src={gallery} alt="Gallery"/>Gallery</motion.li>
</Link>
<Link to="/contact" style={{ textDecoration: 'none'}}>
<motion.li variants={navigationElementVariants} whileHover="hover" className="nav-element-style"><img className="icon-nav-style" src={contacts} alt="Contact"/>Location & Contact</motion.li>
</Link>
</ul>
</motion.div>
</nav>
</>
)
}
export default Navigation
Home component - when you click the button it redirect correctly to the desired component
import React from 'react';
import '../styles/home_styles.css';
import {Link} from 'react-router-dom';
import {motion} from 'framer-motion';
import Header from '../components/Header'
const buttonVariants = {
hover: {
scale: 1.1,
textShadow: "0px 0px 8px rgb(255,255,255)",
boxShadow: "0px 0px 8px rgb(255,255,255)",
transition: {
duration: 0.3,
yoyo: Infinity
}
},
}
const homeContainerVariants = {
animateFrom:{
bottom:-400,
opacity:0
},
animateTo:{
bottom:0,
opacity:1,
transition:{duration:0.5, delay:2.6}
},
exit:{
x:'-100vw',
transition:{ease:'easeInOut'}
}
}
const headerContainerVariants = {
exit:{
x:'-100vw',
transition:{ease:'easeInOut'}
}
}
function Home (){
return (
<>
<motion.div className="header-container" variants={headerContainerVariants} exit="exit">
<Header />
</motion.div>
<motion.div variants={homeContainerVariants} initial="animateFrom" animate="animateTo" exit="exit"
className="home-container">
<div className="button-div">
<Link to="/base">
<motion.button variants={buttonVariants}
whileHover="hover"
className="home-button-style">Order your favourite pizza</motion.button>
</Link>
</div>
</motion.div>
</>
)
}
export default Home
**folder tree **
