项目结构

x项目组件结构在app.js中 主要内容界面与登录界面是区分开的，在最外层的路由嵌套中代码是这样的：

<Router>
       <div className="root1">
                        <Switch>
                            <Route path='/home' component={Home}/>
                            <Route path='/' component={Login}/>
                            <Route component={ErrorPage}/>
                        </Switch>
                    </div>
                </Router>  

我们看到路由的匹配方式，先匹配home级别的，如果没有在匹配/，而/导向login组件，在login组件中判断是否登录和实现登录，形成一个闭环，但是如果请求 /home/123这个不存在的路由会如何呢？

会调转大404，这是在home嵌套路由中捕获的错误路由展示的界面。

 

但是我在请求 /123时并不会跳转到404页面而是会跳转到 /aa页面，这里连有个规律，那就是react的路由默认都是模糊匹配，上面代码中的 /home和/ 都是模糊匹配，并且后者范围比前者大，匹配规则按照书写的顺序，先匹配 路由中是否存在 /home,如果不存在，就去匹配/,理论上来讲/可以匹配任意路由，所以 这里路由的书写顺序比较重要。