即打开一个网站,只会请求一次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>