import React from "react";
import Navbar from "./components/Navbar";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import Report from "./components/Report";
import Contact from "./components/Contact";
import About from "./components/About";
import Post from "./components/Post";
const menuItems = [
{ name: `Home`, path: `/` },
{ name: `Report`, path: `/report` },
{ name: `About`, path: `/about` },
{ name: `Contact`, path: `/contact` },
{ name: `Post`, path: `/posts/:post_id` }
];
const COMPONENT_MAP = {
Home: Home,
Report: Report,
About: About,
Contact: Contact,
Post: Post
};
export default function App() {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Switch>
{menuItems.map(item =>
item.name == `Home` ? (
<Route
exact
path={item.path}
component={COMPONENT_MAP[item.name]}
/>
) : (
<Route path={item.path} component={COMPONENT_MAP[item.name]} />
)
)}
</Switch>
</div>
</BrowserRouter>
);
}