import ReactDOM from "react-dom/client";

import {
    BrowserRouter,
    Route,
    Routes
} from 'react-router-dom';

function Home(props) {
    return (
        <h1>This is the Homepage.</h1>
    );
}

function About(props) {
    return (
        <h1>This is the About page.</h1>
    )
}

function Error(props) {
    return (
        <h1>Error 404. This page does not exist.</h1>
    );
}

function App(props) {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/'>
                    <Home />
                </Route>

                <Route path='about'>
                    <About />
                </Route>

                <Route path='*'>
                    <Error />
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);