MainLayout Component
To make sure that the Header
and SideBar
are always rendered on all thee routes I added a MainLayout
component which imports the two components and then uses react-router-dom
’s Outlet
component. This is combination with putting the /
, /stock
, /favorites
, /stock/:ticker
routes inside MainLayout
’s Route
element in App
renders all it’s child components while including padding and appropriate containers.