react项目如何设置404页面
·
问题:
对于项目里面的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!!!!感觉一个项目的主线就是路由,任何多个组件或则页面都是它的零件!!
更多推荐
所有评论(0)