No Match

/**
 * Created by mapbar_front on 2019/7/20.
 */
import React,{Component} from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    Redirect,
} from 'react-router-dom';
import Home from './../Home/Home';

function WillMatch(){
    return <h2>Matched!</h2>
}
function NoFound({location}){
    return(
        <div>
            <h3>
                No match for <code>{location.pathname}</code>
            </h3>
        </div>
    )
}
class NoMatch extends Component{
    render(){
        return(
            <Router>
                <div>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/old-match">Old Match, to be redirected</Link></li>
                        <li><Link to="/will-match">Will Match</Link></li>
                        <li><Link to="/will-not-match">Will Not Match</Link></li>
                        <li><Link to="/also/will/not/match">Also Will Not Match</Link></li>
                    </ul>
                    <Switch>
                        <Route exact path="/" component={Home}/>
                        <Redirect from="/old-match" to="will-match"/>
                        <Route path="/will-match" component={WillMatch}/>
                        <Route component={NoFound}/>
                    </Switch>
                </div>
            </Router>
        )
    }
}
export default NoMatch;