问题:

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

解答:

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

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

参考代码:

准备的页面

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;

路由配置:

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')
)

 

over!!!!感觉一个项目的主线就是路由,任何多个组件或则页面都是它的零件!!

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐