React not taking a default page at load

Question

I have created a dashboard with a side nav bar and upon selection of each button on the side nav a corresponding page needs to be loaded using react router. I need my default page to be page 1 at load time. and the rest of the pages must be routed on click. On page load only the sidenav is visible and nothing is displayed.

Here is how the page looks on initial render. I have to click on Balance summary to view the page but I want the Balance summary to be loaded by default when the page is loaded the first time. https://shettysam93.github.io/perpetual-dashboard/

import React from 'react';
import Page1 from '../components/Pages/Page1';
import SideMenu from '../components/SideMenu';
import logo from '../logo.svg';
import './App.css';
import {BrowserRouter as Router,Switch, Route} from 'react-router-dom'
import Transactions from '../components/Pages/Transactions'
import CheckDetails from '../components/Pages/CheckDetails'
import FixedHolding from '../components/Pages/FixedHolding'
import Statement from '../components/Pages/Statement'
import DailyConfirms from '../components/Pages/DailyConfirms'
import Documents from '../components/Pages/Docs'
import AccountInfo from '../components/Pages/AccountInfo'
import Tutorials from '../components/Pages/Tutorials'
import Holiday from '../components/Pages/Holiday'





function App() {

 return (

  <div>
  
    <Router>
    <SideMenu />
    <Switch>
      
      <Route path='/' exact component={Page1} />
      <Route path='/transaction' exact component={Transactions}/>
      <Route path='/details' exact component={CheckDetails}/>
      <Route path='/holdings' exact component={FixedHolding}/>

      <Route path='/statements' exact component={Statement} />
      <Route path='/dailyconfirms' exact component={DailyConfirms} />
      <Route path='/documents' exact component={Documents} />

      <Route path='/AccountInfo' exact component={AccountInfo} />
      <Route path='/Tutorials' exact component={Tutorials} />
      <Route path='/Holiday' exact component={Holiday} />

    </Switch>
    </Router>
  </div>
  

 );
}
export default App;

Side Nav: This nav includes the components that will route to the appropriate page which works fine but when the page is loaded the first time only the side nav is displayed and no component is renederd by default.

    import React from 'react'
 import {Drawer as SideNav,
 ListItem,
 List,
 ListItemIcon,
 ListItemText,makeStyles, InputBase} from '@material-ui/core'
 import Balance from '@material-ui/icons/PieChartTwoTone';
 import Transaction from '@material-ui/icons/ReceiptTwoTone';
  import Details from '@material-ui/icons/MonetizationOnTwoTone';
  import Holdings from '@material-ui/icons/AccountBalanceWalletTwoTone';
 import Statement from '@material-ui/icons/DescriptionTwoTone';
 import DailyConf from '@material-ui/icons/DateRangeTwoTone';
 import Documents from '@material-ui/icons/AssignmentTwoTone';
 import Info from '@material-ui/icons/InfoTwoTone';
 import Tutorial from '@material-ui/icons/PlayCircleOutlineTwoTone';
 import Holiday from '@material-ui/icons/BeachAccessTwoTone';

 import {Link} from 'react-router-dom'

const useStyles = makeStyles({
sideNav:{
    display:'absolute',
    flexDirection:'column',
    width:"70%"
},
searchBox:{
    width:"250px",
    height: "px",
    backgroundColor:"#F1F2F2",
    borderRadius:"12px",
    outline:"none",
    margin:"10px 5px 10px 5px",
    border:'1px solid #F1F2F2',
    fontFamily:"Roboto",
    fontSize:"20px",
    textAlign:"center"
},

subHeading: {
    width: "62px",
    height: "16px",
    fontWeight:"700",
    fontFamily:"Roboto",
    fontSize:"10px",
    letterSpacing:"12%",
    color:"#818181",
    margin: "10px 20px 10px 20px",
    position:"relative",
},

listItem:{
    position:"relative",
    left:"0",
    width:"240px",
    outline:'none',
    textDecoration:'none',
    '&:hover':{
        width:"240px",
        backgroundColor:"#FFD051",
        borderRadius:"0px 8px 8px 0px",
        cursor: 'pointer',
        outline:'none'
        
    }
},

listChild:{
    textDecoration:'none',
    display:'inline-block',
    color:"black    "
}
})

function SideMenu() {
const classes = useStyles();

const itemList1 = [{text:"Balance Summary", icon:<Balance />,path:'/'},
{text:"Transactions",icon:<Transaction />,path:'/transaction'}, 
{text:"Check Details",icon:<Details />,path:'/details'},
{text:"Fixed Term Holdings",icon:<Holdings />,path:'/holdings'}]

const itemList2 = [{text:"Statements", icon:<Statement />,path:'/statements'},
{text:"Daily Confirms",icon:<DailyConf />,path:'/dailyconfirms'},
{text:"Documents",icon:<Documents />,path:'/documents'}]

const itemList3 = [{text:"Account Information", icon:<Info />,path:'/AccountInfo'},
{text:"Tutorials",icon:<Tutorial />,path:'/Tutorials'},
{text:"Holiday Schedule",icon:<Holiday />,path:'/Holiday'}]



return (
    <SideNav variant = "permanent" className={classes.sideNav}>
        <List>
            <ListItem container>
            <input type = "text" className={classes.searchBox}/>
            </ListItem>
        </List>
        {/* <InputBase className={classes.searchBox} placeholder=" SEARCH"/> */}
        <h6 className={classes.subHeading} >ACCOUNTS</h6>
        <List>
            {itemList1.map((item,index)=>{
                const {text, icon, path} = item
                return(
                <ListItem button key={text} className={classes.listItem}>
                    {icon && <ListItemIcon>{icon}</ListItemIcon>}
                    <Link to={item.path} className={classes.listChild}>
                    
                    <ListItemText primary={text} />
                    </Link>
                </ListItem>
                )
            })}
        </List>

        <h6 className={classes.subHeading}>STATEMENTS</h6>
        <List>
            {itemList2.map((item,index)=>{
                const {text,icon} = item
                return(
                    <ListItem button key={text} className={classes.listItem}>
                        {icon && <ListItemIcon>{icon}</ListItemIcon>}
                        <Link to={item.path} className={classes.listChild}>
                    
                    <ListItemText primary={text} />
                    </Link>
                    </ListItem>
                )
            })}
        </List>

        <h6 className={classes.subHeading}>RESOURCES</h6>
        <List>
            {itemList3.map((item,index)=>{
                const {text,icon} = item
                return(
                    <ListItem button key={text} className={classes.listItem}>
                        {icon && <ListItemIcon>{icon}</ListItemIcon>}
                        <Link to={item.path} className={classes.listChild}>
                    
                    <ListItemText primary={text} />
                    </Link>
                    </ListItem>
                )
            })}

          
        </List>
    </SideNav>
)
}

export default SideMenu

 

Answer 1

Seems you serve your app from some "/perpetual-dashboard" sub-directory in your github. Try specifying the router's basename prop so paths are relative from this directory.

The base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.

<Router basename="/perpetual-dashboard">
  <SideMenu />
  <Switch>
    <Route path='/' exact component={Page1} />
    <Route path='/transaction' exact component={Transactions}/>
    <Route path='/details' exact component={CheckDetails}/>
    <Route path='/holdings' exact component={FixedHolding}/>

    <Route path='/statements' exact component={Statement} />
    <Route path='/dailyconfirms' exact component={DailyConfirms} />
    <Route path='/documents' exact component={Documents} />

    <Route path='/AccountInfo' exact component={AccountInfo} />
    <Route path='/Tutorials' exact component={Tutorials} />
    <Route path='/Holiday' exact component={Holiday} />
  </Switch>
</Router>

Answer 2

You have to change this route

<Route path='/' exact component={Page1} />

to

<Route path='/' exact component={Page2} />