Question

如果我的用户在移动设备上，我试图重定向到错误页面（我可以在其中传递消息）。虽然重定向确实有效并且更改了URL，但页面完全是白色的。当我查看页面源代码时，根div完全是空的！我尝试使用BrowserRouter并按照其他问题的建议在路线中添加“精确”，但没有任何帮助。任何帮助将不胜感激！

这是我的代码：

应用组件：

import React, { Component, Fragment } from 'react';
import { Route, Switch, withRouter, Redirect } from "react-router-dom";
import {HOME_ROUTE, LOGIN_ROUTE, DASHBOARD_ROUTE, ERROR_ROUTE} from '../constants';
import HomePage from "../../pages/HomePage";
import ErrorPage from "../../pages/ErrorPage";
import DashboardPage from "../../pages/DashboardPage";
import LoginPage from "../../pages/LoginPage";
import NavBar from '../components/NavBar';
import {isMobileOnly} from "react-device-detect";

class App extends Component {
    render() {
        return isMobileOnly ? <Redirect to={ERROR_ROUTE}/> : (
            <Fragment>
                <Route exact path={HOME_ROUTE} component={HomePage}/>
                <Route
                    path="/(.+)"
                    render={() => (
                        <Fragment>
                            <NavBar/>
                            <Switch key={this.props.location.key}>
                                <Route path={LOGIN_ROUTE} component={LoginPage}/>
                                <Route path={DASHBOARD_ROUTE} component={DashboardPage}/>
                                <Route exact path={ERROR_ROUTE} component={ErrorPage}/>
                            </Switch>
                        </Fragment>
                    )}
                />
            </Fragment>
        );
    }
}

export default withRouter(App);

错误组件：

import React from 'react';
import { Row, Col, Icon, Typography, Button } from 'antd';
import { DefinedRow } from "../../common/components/styled";

const { Title, Text } = Typography;

const ErrorPage = ({message, history}) => {
    return (
            <DefinedRow type="flex" justify="center" align="middle" height="calc(100vh - 64px)" gutter={32}>
                <Col md={12} xs={24}>
                    <Row type="flex" justify="center">
                        <Icon style={{fontSize: '14rem'}} type="warning" />
                    </Row>
                </Col>
                <Col md={12}>
                        <Col md={24}>
                            <Text type="secondary" style={{fontSize: '6rem'}}>Error</Text>
                        </Col>
                        <Col md={24}>
                            <Text type="secondary" style={{fontSize: '2rem'}}>You look a little lost...</Text>
                        </Col>
                    <Col md={24}>
                        <Text type="secondary" style={{fontSize: '2rem'}}>{message}</Text>
                    </Col>
                        <Col md={24}>
                            <Text type="secondary" style={{fontSize: '2rem'}}>Find a tour guide to help you get back!</Text>
                        </Col>
                        <Col md={24}>
                            <Button type="primary" size="large" onClick={() => history.push('/home')}>Go back<Icon type="enter" /></Button>
                        </Col>
                </Col>
            </DefinedRow>
    );
};

export default ErrorPage;

重定向到空白页

0 个答案: