react-router-dom示例讲解（六）——未匹配（404页面）

react-router-dom的官方示例中，未匹配的示例也是一个比较简单的示例了。其核心就是Switch组件的匹配规则——仅仅匹配第一个符合条件的Route。

实现的效果图：


相关示例代码：

import React, {Component} from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    Redirect
} from 'react-router-dom';


class App extends Component {
    constructor(props) {
        super(props);
    }
    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>
                    <hr/>
                    <Switch>
                        <Route path="/" exact component={Home}/>
                        <Redirect from="/old-match" to="/will-match"/>
                        <Route path="/will-match" component={WillMatch}/>
                        <Route component={NoMatch}/>
                    </Switch>
                </div>
            </Router>
        );
    }
}

class Home extends Component{
    render(){
        return (
            <h1>
                Switch组件返回第一个匹配成功的Route路由。但是还有一个Route组件没有path，它能够被任何路径匹配到！！！
            </h1>
        )
    }
}
class WillMatch extends Component{
    render(){
        return (
            <h1>Matched</h1>
        )
    }
}
class NoMatch extends Component{
    render(){
        return (
            <h1>NoMatch for {this.props.location.pathname}</h1>
        )
    }
}

export default App;

整体实现思路：
使用Switch组件，匹配第一个符合条件的Route，然后把一个无path的Route组件，写在Switch的最后一项，这样就能在匹配不到合适的组件的时候，总能匹配到最后一个Route对应的组件。

这个示例的github地址：https://github.com/liwudi/react-router-dom6.git

下一篇：react-router-dom示例讲解（七），路径递归