Setup router¶

Router is an optional module which handles view state management.

We'll use standard React Router to do this job.

Install optional module¶

npm i --save-dev react-router-dom '@types/react-router-dom'

Edit App.tsx¶

Change your App to look like:

import { ROUTE_ABOUT, ROUTE_HOME, ROUTE_INDEX } from "../../constants/route";
import { APP_CLASS_NAME } from "../../constants/className";

import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    NavLink,
    Redirect
} from "react-router-dom";

import './App.scss';
import SiteHeader from "../siteHeader/SiteHeader";
import SiteFooter from '../siteFooter/SiteFooter';
import SiteNav from "../siteNav/SiteNav";
import AboutView from "../aboutView/AboutView";
import HomeView from "../homeView/HomeView";

export default function App () {

    return (
        <Router>
            <div className={APP_CLASS_NAME}>

                <SiteHeader className={`${APP_CLASS_NAME}-header`}>
                    <SiteNav className={`${APP_CLASS_NAME}-nav`}>
                        <ul>
                            <li><NavLink to={ROUTE_HOME}>Home</NavLink></li>
                            <li><NavLink to={ROUTE_ABOUT}>About</NavLink></li>
                        </ul>
                    </SiteNav>
                </SiteHeader>

                <section className={`${APP_CLASS_NAME}-body`}>
                    <Switch>
                        <Route path={ROUTE_ABOUT} exact>
                            <AboutView />
                        </Route>
                        <Route path={ROUTE_HOME} exact>
                            <HomeView />
                        </Route>
                        <Route path={ROUTE_INDEX}>
                            <Redirect to={ROUTE_HOME} />
                        </Route>
                    </Switch>
                </section>

                <SiteFooter className={`${APP_CLASS_NAME}-footer`} />

            </div>
        </Router>
    );

}