react项目如何设置404页面

首先创建一个报错页面, 然后在路由页面中引入

const ErrorPage = loadable(() => import('../pages/Error'));
const BasicRoute = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/" render={() => (
                    Boolean(sessionStorage.getItem("token")) ? (
                        <Redirect to="/online" />
                    ) : (
                            <Home />
                        )
                )} />
                <Route exact path="/login" render={() => (
                    Boolean(sessionStorage.getItem("token")) ? (
                        <Redirect to="/online" />
                    ) : (
                            <Login />
                        )
                )} />
                <Route exact path="/regist" render={() => (
                    Boolean(sessionStorage.getItem("token")) ? (
                        <Redirect to="/online" />
                    ) : (
                            <Regist />
                        )
                )} />
                <Route exact path="/dating" render={() => (
                    Boolean(sessionStorage.getItem("token")) ? (
                        <Redirect to="/online" />
                    ) : (
                            <Dating />
                        )
                )} />
                <Route exact path="/inbox" render={() => (
                    Boolean(sessionStorage.getItem("token")) ? (
                        <Redirect to="/online" />
                    ) : (
                            <Inbox />
                        )
                )} />
                <Route exact path="/meetyou" render={() => (
                    Boolean(sessionStorage.getItem("token")) ? (
                        <Redirect to="/online" />
                    ) : (
                            <Meetyou />
                        )
                )} />
                <Route exact path="/insearch" render={() => (
                    Boolean(sessionStorage.getItem("token")) ? (
                        <Redirect to="/online" />
                    ) : (
                            <InSearch />
                        )
                )} />
                <Route exact path="/mycity" render={() => (
                    Boolean(sessionStorage.getItem("token")) ? (
                        <Redirect to="/online" />
                    ) : (
                            <Mycity />
                        )
                )} />
                <Route exact path="/lastsignup" render={() => (
                    Boolean(sessionStorage.getItem("token")) ? (
                        <Redirect to="/online" />
                    ) : (
                            <Lastsignup />
                        )
                )} />
                <Route exact path="/witheme" render={() => (
                    Boolean(sessionStorage.getItem("token")) ? (
                        <Redirect to="/online" />
                    ) : (
                            <Witheme />
                        )
                )} />
                <PrivateRoute exact path="/online" component={Online} />
                <PrivateRoute exact path="/myresume:key" component={Myresume} />
                <PrivateRoute exact path="/search" component={onSearch} />
                <PrivateRoute exact path="/like" component={meLike} />
                <PrivateRoute exact path="/city" component={onCity} />
                <PrivateRoute exact path="/personinfo" component={perosenInfo} />
                <PrivateRoute exact path="/conver" component={converSation} />
                <PrivateRoute exact path="/chat" component={chitChat} />
                  放在最后面 只要路径不匹配就出现此页面
                <Route component={ErrorPage}></Route>
            </Switch>
        </BrowserRouter>
    )
}
export default BasicRoute

  

原文地址:https://www.cnblogs.com/taxun/p/13433891.html