Question:

For the 404 page in the project, I haven't made clear what kind of logic it is before. Now let's summarize

Answer:

1-404 is a page first, prepare a static page first

2 - set the 404 page by using the route origin. In the route configuration, if there is no match to the route set by yourself, skip to the 404 page

Reference code:

Prepared pages

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='A mistake!'></PageTitle>
				<div className="row" style={{marginTop:'30px'}}>
					<div className="col-md-12">
						<span>Page picked up by dog～～～</span>
						<Link to='/'>Click me to return to the home page</Link>
					</div>
				</div>

			</div>
		)
	}
}
export default Error;

Routing configuration:

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';
//container
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!!!!! Feel that the main line of a project is routing, and any multiple components or pages are its parts!!