404 pages configured in the project and ultimately, the process react-router configuration page 404 of the record
Note:
- Need to use Switch assembly includes a routing component (Switch Components guarantee only render one of the sub routing)
- NotFount routing configuration, Redirect assembly for increasing the jumping
import * as React from "react";
import { BrowserRouter as Router, Route, Switch, Redirect, Link } from "react-router-dom";
import Home from "src/pages/home";
import NotFound from "./pages/NotFound"
import List from "./pages/List"
class App extends React.Component {
render() {
return (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/list">list</Link></li>
<li><Link to="/404">404</Link></li>
</ul>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/list" component={List} />
// 第一种 地址栏显示点击的路由
<Route component={NotFound} />
// 第二种 地址栏显示/notFound
<Route path="/notFound" component={NotFound} />
<Redirect to="/notFound" />
</Switch>
</div>
</Router>
)
}
}
export default App;