关于404页面的实现逻辑

Posted 2021-01-12 ipoodle

问题：

对于项目里面的404页面，之前一直没有理清楚到底是什么样的一个逻辑，现在总结一下

解答：

1- 首先404是一个页面，先准备好一个静态页面

2-利用路由来设置404页面，在路由配置里，假如没有匹配到自己设置的路由，则跳转到404页面

参考代码：

准备的页面

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import {BrowserRouter as Router,Route,Link,Switch,Redirect} from ‘react-router-dom‘;


import Layout         from ‘component/layout/index.jsx‘;
import Home             from ‘./page/home/index.jsx‘;
import Login             from ‘page/login/index.jsx‘;
import ErrorPage     from ‘page/error/index.jsx‘;
//容器
class App extends React.Component {
    constructor(props){
        super    (props)
    }

    render() {
        let layoutRouter = (
            <Layout>
                <Switch>
                    <Route exact path=‘/‘ component={Home}></Route>
                    <Route  path=‘/product‘ component={Home}></Route>
                    <Route  path=‘/product-category‘ component={Home}></Route>
                    <Route   component={ErrorPage}></Route>
                </Switch>
            </Layout>
            );
        return (
            <Router>
                <Switch>
                    <Route path=‘/login‘ component={Login}/>
                    <Route path=‘/‘ render={props =>layoutRouter}/>
                </Switch>
            </Router>
        )
    }
}

ReactDOM.render(
        <App/>,
    document.getElementById(‘app‘)
)

路由配置：

import React 			from ‘react‘;
import PageTitle 	from ‘component/page-title/index.jsx‘;
import {Link}     from ‘react-router-dom‘;

class Error extends React.Component {
	constructor(props){
		super(props)
	}
	render(){
		return (
			<div id=‘page-wrapper‘>
				<PageTitle title=‘出错啦！‘></PageTitle>
				<div className="row" style={{marginTop:‘30px‘}}>
					<div className="col-md-12">
						<span>页面被狗狗叼走啦～～～</span>
						<Link to=‘/‘>点我返回首页</Link>
					</div>
				</div>

			</div>
		)
	}
}
export default Error;