import React from 'react';
//BrowserRouter: base configuration
//Route: configure specific routes and wrap component
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} from 'react-router-dom';

import About from './components/about';
import Contact from './components/contact';
import Create from './components/create';
import Home from './components/home';
import Read from './components/read';

export default function App() {
  return (
      <div className="wrapper">
	  {/*h1: global page title*/}
	  {/*template: wrapper and h1 is rendered on every page*/}
	  {/*TODO Navigation or header on every page?*/}
	  <h1>App</h1>
	  <Router>
	      <div className="App">
		  <ul>
		      <li><Link to="/">Home</Link></li>
		      <li><Link to="/about">About Us</Link></li>
		      <li><Link to="/contact">Contact Us</Link></li>
		      <li><Link to="/create">Create</Link></li>
		      <li><Link to="/read">Read</Link></li>
		  </ul>
		  <Routes>
		      {/*exact: match the exact value with the URL*/}
		      <Route exact path='/' element={< Home />}></Route>
		      <Route exact path='/about' element={< About />}></Route>
		      <Route exact path='/contact' element={< Contact />}></Route>
		      <Route exact path='/create' element ={<Create />}></Route>
		      <Route exact path='/read' element={<Read />}></Route>
		  </Routes>
	      </div>
	  </Router>
      </div>
  );
};
