单页应用是什么？react-router-dom的使用

即打开一个网站，只会请求一次html文件，无论你如何点击跳转，都不刷新页面。

一个普通有url地址的a标签，你点击一下，就会重新请求href后面的地址（即使配置了Route路由），重新返回一个html文件，刷新页面。会比较耗费性能。

<a href="/detail">

多页面应用程序：例如简书，打开首页请求一个html, 再打开一个链接文章，页面先是白屏一会儿，再出现内容，这就是多页面应用程序，又加载了一个html文件过来。

react-router-dom的使用

Route是配置路由规则，一个规则对应一个组件，当切换到对应路由的时候，该组件就会被挂载出来

<BrowserRouter>
     <Route exact path="/" component={Home}></Route>
     <Route path="/detail" component={Detail}></Route>
</BrowserRouter>

使用Link组件配合Router路由规则，来做切换路由，这样点击的时候不会直接跳转新页面，而是切换了路由路径，react就会帮我们加载路由对应detail组件，这种页面切换非常流畅。

import {Link} from 'react-router-dom'

<Link to="/detail">　　

 还要注意Link也要放在Router组件中的，如上代码没报错是因为Link是在Home组件中，后Home组件又在Router中，所以组件中想用到Link，就要将其用Router包裹

　　　　　　<BrowserRouter>
　　　　　　　　　　// Header组件放在Router中，是因为Header组件内部使用Link，而Link必须放在Router中，否则报错
                <Header/>
　　　　　　　　　　// 配置路由规则，route也放在Router中
                <Route exact path="/" component={Home}></Route>
                <Route path="/detail" component={Detail}></Route>
          </BrowserRouter>