react-router configuration page 404

404 pages configured in the project and ultimately, the process react-router configuration page 404 of the record
Note:

  1. Need to use Switch assembly includes a routing component (Switch Components guarantee only render one of the sub routing)
  2. 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;

Guess you like

Origin www.cnblogs.com/chrissong/p/11022113.html