問題：

對於項目裏面的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頁面的實現邏輯