關於404頁面的實現邏輯
阿新 • • 發佈:2018-10-13
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 Layoutfrom ‘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頁面的實現邏輯