1. 程式人生 > >關於404頁面的實現邏輯

關於404頁面的實現邏輯

export top wrapper highlight .com title sha margin dom

問題:

對於項目裏面的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;  

關於404頁面的實現邏輯