反应在加载时不采用默认页面

Question

我创建了一个带有侧导航栏的仪表板，并且在选择侧导航上的每个按钮后，需要使用反应路由器加载相应的页面。 我需要我的默认页面在加载时为第 1 页。 并且页面的 rest 必须在点击时进行路由。 在页面加载时，只有 sidenav 可见，不显示任何内容。

这是页面在初始渲染时的外观。 我必须单击余额摘要才能查看页面，但我希望在第一次加载页面时默认加载余额摘要。 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;

侧导航：此导航包含将路由到适当页面的组件，该页面工作正常，但当页面第一次加载时，仅显示侧导航，默认情况下不渲染任何组件。

    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

似乎您从 github 中的某个“/perpetual-dashboard”子目录中为您的应用程序提供服务。 尝试指定路由器的basename属性，以便路径与此目录相对。

所有位置的基础 URL。 如果您的应用程序是从服务器上的子目录提供的，您需要将其设置为子目录。 格式正确的基本名称应该有一个前导斜杠，但没有尾随斜杠。

<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

你必须改变这条路线

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

至

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