404页面的设置

404页面一般是一个单独的组件，组件如下：

import React, {Component, Fragment} from 'react';
import './ErrorPage.less'
export default class App extends Component {
    componentDidMount() {

    }

    render() {
        return (
            <Fragment>
                <div className={'contentBox'} key={'2'}>
                    <img src={require('../../images/404.jpeg')} className={'img'}/>
                </div>
            </Fragment>
        )
    }
}

这个页面放在哪个位置呢，在何时展示呢？

我们将其放在路由配置的位置，代码如下：

let routeAry = (props) => {
    /*props.match.url其实就是/home*/
    return <Switch>
        <Route path={`/home/tagendlist/tagendlistadd/add`} component={TagendListAdd} />
        <Route path={`/home/tagendlist/tagendlistadd/check/:id`} component={TagendListCheck} />
        <Route path={`/home/tagendlist/tagendlistadd/editor/:id`} component={TagendListEditor} />
    <Route component={ErrorPage}/>

    </Switch>
}

我们看到，路由有switch包裹，switch有个特性，从上向下匹配路由，匹配之后就会停止，也就是说如果路由匹配了前面三个规则，都会展示对应的组件，如果没有匹配到，就会展示404组件，并且最后一个route没有设置path属性，模糊匹配任意路由。这样就不会漏掉特殊路由了。