自学React系列~06之路由

路由简介

React 中的路由可以理解为：根据浏览器中的 URL 匹配对应的资源。需要用到路由最常见的场景就是导航，根据不同的 url 展示不同的页面。

在 React 中，路由需要使用到两个组件 Router 和 Route ，其中一个 Route 包含多个 Router 组件 。结构如下：

<Router>
  <Route path="/" component={APP}/>
  <Route path="/index" component={Index} />
</Router>

path: 指定匹配的路径。
component: 指定渲染的组件。
安装组件: npm install react-router-dom

Router

BrowserRouter

BrowserRotuer ：从 url 地址栏中观察，是 url 会改着一起变化的。例如：

https://shijieling.top/page/1 -> https://shijieling.top/page/2 参数变化会在域名后面的 url 变化。

HashRouter

HashRouter: url 地址栏中观察 ，前面的域名部分不会发生变化，而在在后面添加一个 # 号，然后再是路径信息

https://shijieling.top/#/page/1 -> https://shijieling.top/#/page/2

Link和NavLink

Link

NavLink