import React , { useEffect } from 'react' ; import { Switch , Route , Redirect , useLocation } from 'react-router-dom' ; import { PrimaryHeader } from 'ProjectPlanner/PrimaryHeader' ; import { PrimaryFooter } from 'ProjectPlanner/PrimaryFooter' ; import 'ProjectPlanner/PrimaryLayout.scss' ; import { Dashboard } from 'ProjectPlanner/Dashboard' ; import { BrowseBoards } from 'ProjectPlanner/BrowseBoards' ; import { Board } from 'ProjectPlanner/Board' ; export const PrimaryLayout = ( ) => { const { key } = useLocation ( ) ; useEffect ( ( ) => { window . scrollTo ( 0 , 0 ) ; } , [ key ] ) ; return ( < div className = "primary-layout" > < PrimaryHeader /> < main className = "primary-content" > < Switch > < Route path = "/" exact > < Dashboard /> < /Route> < Route path = "/boards" exact > < BrowseBoards /> < /Route> < Route path = "/boards/:boardId" exact > < Board /> < /Route> < Redirect to = "/" / > < /Switch> < /main> < PrimaryFooter / > < /div>); } ;