React如何为404创建自定义页面?

时间:2018-12-06 09:29:17

标签: reactjs

<MuiThemeProvider theme={muiTheme}>
            <V0MuiThemeProvider muiTheme={muiThemeV0}>
                <React.Fragment>
                    <Helmet
                        defaultTitle="Life"
                        titleTemplate="Life: %s"
                    />

                    <Switch>
                        <UnderDevelopmentPage path="/underdevelopment" component={UnderDevelopmentPage}/>
                        <LayoutDefault exact path={MyProfilePage.Path} component={MyProfilePage}/>
                        <LayoutDefault path={MyResultsPage.Path} component={MyResultsPage}/>
                        <LayoutDefault path={MyPlansPage.Path} component={MyPlansPage}/>
                        <LayoutDefault path={MyFinancePage.Path} component={MyFinancePage}/>
                        <LayoutDefault path={MyBenefitsPage.Path} component={MyBenefitsPage}/>
                        <LayoutDefault path={BIClub.Path} component={BIClub}/>
                        <LayoutDefault path={BIClubCatalogPage.Path} component={BIClubCatalogPage}/>
                        <LayoutDefault path={BIClubCompanyPage.Path} component={BIClubCompanyPage}/>
                        <LayoutDefault path={BIClubDiscountPage.Path} component={BIClubDiscountPage}/>
                        <LayoutDefault path={MyEventsPage.Path} component={MyEventsPage}/>
                        <LayoutDefault path={CompanyEventsPage.Path} component={CompanyEventsPage}/>
                        <LayoutDefault path={OutsideEventsPage.Path} component={OutsideEventsPage}/>
                        <LayoutDefault path={HistoryPage.Path} component={HistoryPage}/>
                        <LayoutDefault path={OutboxPage.Path} component={OutboxPage}/>
                        <LayoutDefault path={InboxPage.Path} component={InboxPage}/>
                        <LayoutDefault path="/404" component={Notfound}/>



                    </Switch>
                    <LeftSidebar/>
                </React.Fragment>
            </V0MuiThemeProvider>
        </MuiThemeProvider>

我需要为页面做什么,没有任何路由?对于所有404页面? 这就是我所有的路线代码,简单的重定向对我没有帮助

2 个答案:

答案 0 :(得分:0)

不鼓励传递除<Route><Redirect>之外的任何内容,因为<Switch>将每个孩子视为路由,而Redirect只是Route的别名。

尝试如下更改代码:

<UnderDevelopmentPage path="/underdevelopment" component={UnderDevelopmentPage}/>
<LayoutDefault>
    <Switch>
        <Route exact path={MyProfilePage.Path} component={MyProfilePage}/>
        <Route path={MyResultsPage.Path} component={MyResultsPage}/>
        <Route path={MyPlansPage.Path} component={MyPlansPage}/>
        <Route path={MyFinancePage.Path} component={MyFinancePage}/>
        <Route path={MyBenefitsPage.Path} component={MyBenefitsPage}/>
        <Route path={BIClub.Path} component={BIClub}/>
        <Route path={BIClubCatalogPage.Path} component={BIClubCatalogPage}/>
        <Route path={BIClubCompanyPage.Path} component={BIClubCompanyPage}/>
        <Route path={BIClubDiscountPage.Path} component={BIClubDiscountPage}/>
        <Route path={MyEventsPage.Path} component={MyEventsPage}/>
        <Route path={CompanyEventsPage.Path} component={CompanyEventsPage}/>
        <Route path={OutsideEventsPage.Path} component={OutsideEventsPage}/>
        <Route path={HistoryPage.Path} component={HistoryPage}/>
        <Route path={OutboxPage.Path} component={OutboxPage}/>
        <Route path={InboxPage.Path} component={InboxPage}/>
        <Route component={Notfound}/>
    </Switch>

</LayoutDefault>

答案 1 :(得分:0)

嘿:D我想您应该使用嵌套在<route>上的<LayoutDefault>