《React后台管理系统实战：十二》前端404页

一、新建文件及文件夹

建立文件夹

src/pages/not-found

在其下建立文件：

E:.
│  not-found.jsx
│  not-found.less
│
└─images
        404.png

二、src/pages/admin/admin.jsx

import React,{Component} from 'react'
import {Redirect,Route,Switch} from 'react-router-dom' //引入路由组件
// import memoryUtils from '../../utils/memoryUtils' 去除此行
import { Layout } from 'antd'; //引入antd的页面布局
import LeftNav from './left' //因为文件名是index所以可省略
import Header from './header/index' 

//引入需要配置路由的页面
import Home from './home'

import Category from './category' //产品分类
import Product from './product'

import Role from './role' //角色管理页面
import User from './user/user' //用户管理页面

import Bar from './charts/bar' //图表页面
import Pie from './charts/pie'
import Line from './charts/line'
import { connect } from 'react-redux' //引入
import NotFound from '../not-found/not-found' //【0】引入前台404组件


const { Footer, Sider, Content } = Layout;

class Admin extends Component{
    // constructor(props){
    //     super(props);
    // }

    render(){
        // 读取memoryUtils里的user数据，如果不存在就跳转到登录页面
        const user=this.props.user  //memoryUtils.user 改用3处传入的用户数据
        if(!user || !user._id){
            return <Redirect to='/login'/>
        }
        return(
          
            <Layout style={{minHeight:'100%'}}>
                <Sider>
                    <LeftNav/>
                </Sider>
                <Layout>
                    <Header/>
                    {/*路由配置在要显示的位置，即内容里 */}
                    <Content style={{backgroundColor:'#fff',margin:20,height:'100%'}}>
                        <Switch>
                            {/* 【1】加一个绝对匹配，如果请求根路径，则跳转到/home页面 */}
                            <Redirect exact from='/' to='/home'/> 
                            <Route path='/home' component={Home}/>
                            <Route path='/category' component={Category}/>
                            <Route path='/product' component={Product}/>
                            <Route path='/role' component={Role}/>
                            <Route path='/user' component={User}/>
                            <Route path='/charts/bar' component={Bar}/>
                            <Route path='/charts/line' component={Line}/>
                            <Route path='/charts/pie' component={Pie}/>
                            <Route component={NotFound}/> {/*【2】上面没有一个匹配, 直接显示404组件*/}
                            {/*如果以上都不匹配跳转到home页 */}
                            {/* <Redirect to='/home'/> */}
                        </Switch>
                        
                    </Content>
                    <Footer style={{textAlign:'center',color:'#333'}}>版权所有@pasaulis</Footer>
                </Layout>
            </Layout>
           
        )
    }
}
//connect把用户数据传入当前组件备用
export default connect(
    state=>({user:state.user}),
    {}
)(Admin)

三、not-found.jsx

import React, {Component} from 'react'
import {Button, Row, Col} from 'antd'
import {connect} from 'react-redux'

import {setHeadTitle} from '../../redux/actions' //引入redux设置头部标题动作
import './not-found.less'

/*
前台404页面
 */
class NotFound extends Component {

  goHome = () => {
    this.props.setHeadTitle('首页') //为防止跳转到首页不显示头部标题加此项
    this.props.history.replace('/home') //跳转到首页
  }

  render() {
    return (

      <Row className='not-found'>
        <Col span={12} className='left'></Col>
        <Col span={12} className='right'>
          <h1>404</h1>
          <h2>抱歉，你访问的页面不存在</h2>
          <div>
            <Button type='primary' onClick={this.goHome}>
              回到首页
            </Button>
          </div>
        </Col>
      </Row>
    )
  }
}

export default connect(
  null,
  {setHeadTitle}
)(NotFound)

四、not-found.less

.not-found{
  background-color: #f0f2f5;
  height: 100%;
  .left {
    height: 100%;
    background: url('./images/404.png') no-repeat center;
  }
  .right {
    padding-left: 50px;
    margin-top: 150px;
    h1 {
      font-size: 35px;
    }
    h2 {
      margin-bottom: 20px;
      font-size: 20px;
    }
  }
}

五、效果

访问 http://localhost:3000/ 跳转到 http://localhost:3000/home
访问 http://localhost:3000/xxx 显示404