BrowserRoute Switch not showing pages - reactjs

Question

Im at my whits end, ive followed tutorials for hours now and i cant get it to work. basically the Switch does not work when i press the links.It just displays nothing but does change the link.
App.js
import './index.css';
import React, { Component } from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './Home';
import Shop from './Shop';
import MainNav from './MainNav';
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<MainNav />
<Switch>
<Route exact path="/" Component={Home}/>
<Route path="/Shop" Component={Shop}/>
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
MainNav.js
import { IoIosHome } from "react-icons/io";
import { IoIosListBox } from "react-icons/io";
import { IoIosBeer } from "react-icons/io";
import { IoIosArrowDown } from "react-icons/io";
import React, { useState, useEffect, useRef, Component, } from 'react';
import { CSSTransition } from 'react-transition-group';
import {NavLink} from "react-router-dom";
class MainNav extends Component {
render() {
return (
<Navbar>
<NavLink exact to="/" ><NavItem icon={<IoIosHome />}/></NavLink>
<NavLink to="/Shop"><NavItem icon={<IoIosBasket />}/></NavLink>
<NavItem icon={<IoIosListBox />} />
<NavItem icon={<IoIosArrowDown />}>
<DropdownMenu></DropdownMenu>
</NavItem>
</Navbar>
);
}
}
function NavItem(props) {
const[open, setOpen] = useState(false);
return (
<li classname="nav-item">
<a href="#" className="icon-button" onClick={() => setOpen(!open)}>
{props.icon}
</a>
{open && props.children}
</li>
);
}
The home and shop just has some text in and works when i bring them in outside the switch. ive tried all these examples changing to classes and functions respectively.
https://www.w3jar.com/react-navigation-example-with-react-router-dom/
https://codesandbox.io/s/xkj1xKO6r?file=/index.js
https://www.youtube.com/watch?v=lCbcB9AU-98&list=PL3I69UeHTyDNUK8t-GIkwWfY73rEW8LS2&index=4&t=0s
Im starting to think im missing something else.

Answer 1

<Route path="/Shop" Component={Shop}/>
to
<Route path="/Shop"><Shop /></Route>
Not sure why it cant read it in curly brackets but this works.