URL的hash
URL的hash也就是錨點(#), 本質上是改變window.location的href屬性巩螃；
我們可以通過直接賦值location.hash來改變href, 但是頁面不發(fā)生刷新炬转；
實際截圖
image.png
HTML5的history
history接口是HTML5新增的, 它有l(wèi)六種模式改變URL而不刷新頁面：
--replaceState：替換原來的路徑；
--pushState：使用新的路徑坛怪；
--popState：路徑的回退誊涯；
--go：向前或向后改變路徑；
--forward：向前改變路徑皮仁；
--back：向后改變路徑剃根；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="/home">首頁</a>
<a href="/about">關于</a>
<div class="router-view"></div>
<script>
// 獲取所有的a 元素,自己來監(jiān)聽a元素的改變
const aEls = document.querySelectorAll('a');
const routerViewEl = document.querySelector('.router-view')
for (let el of aEls) {
el.addEventListener('click', e => {
console.log(e);
e.preventDefault();
const href = el.getAttribute('href')
history.pushState({}, "哈哈哈", href)
urlChange()
})
}
// 執(zhí)行返回操作時,依然來到URLChange
window.addEventListener('popstate', urlChange)
window.addEventListener("go", urlChange)
function urlChange() {
console.log(location.pathname);
switch (location.pathname) {
case "/home":
routerViewEl.innerHTML = "首頁";
break;
case "/about":
routerViewEl.innerHTML = "關于";
break;
default: routerViewEl.innerHTML = "default"
}
}
</script>
</body>
</html>
實際截圖
image.png
安裝react-router：
安裝react-router-dom會自動幫助我們安裝react-router的依賴；
yarn add react-router-dom
react-router最主要的API是給我們提供的一些組件：
1.BrowserRouter或HashRouter
--Router中包含了對路徑改變的監(jiān)聽鹰祸，并且會將相應的路徑傳遞給子組件甫窟；
--BrowserRouter使用history模式密浑；
--HashRouter使用hash模式蛙婴；
2.Link和NavLink：
--通常路徑的跳轉是使用Link組件，最終會被渲染成a元素尔破；
--NavLink是在Link基礎之上增加了一些樣式屬性（后續(xù)學習）街图；
--to屬性：Link中最重要的屬性浇衬，用于設置跳轉到的路徑；
3.Route：
Route用于路徑的匹配餐济；
--path屬性：用于設置匹配到的路徑耘擂；
--component屬性：設置匹配到路徑后，渲染的組件絮姆；
--exact：精準匹配醉冤，只有精準匹配到完全一致的路徑，才會渲染對應的組件篙悯；
如果模糊匹配的話就需要加exact
image.png
路由最基本的使用-實際代碼如下:
import React, { PureComponent } from 'react';
import { BrowserRouter,Link,Route } from "react-router-dom"
import './App.css';
import About from './pages/about';
import Home from './pages/home';
import Profile from './pages/profile';
class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<div>
<BrowserRouter>
{/* 1.跳轉路徑的方式 */}
<Link to="/">首頁</Link>
<Link to="/about">關于</Link>
<Link to="/profile">我的</Link>
{/* 2.跳轉之后要顯示渲染的頁面 exact: 當你寫path:"/" 的時候 這個就是一個模糊匹配,所以加exact 是一個嚴格匹配切記*/}
<Route path="/" exact component={Home}/>
<Route path="/about" component={About}/>
<Route path="/profile" component={Profile}/>
</BrowserRouter>
</div>
)
}
}
export default App;
NavLink的使用:
需求：路徑選中時蚁阳，對應的a元素變?yōu)榧t色
這個時候，我們要使用NavLink組件來替代Link組件：
--activeStyle：活躍時（匹配時）的樣式鸽照；
--activeClassName：活躍時添加的class螺捐；
--exact：是否精準匹配；
--但是矮燎，我們會發(fā)現在選中about或profile時定血，第一個也會變成紅色：
--原因是/路徑也匹配到了/about或/profile；
--這個時候诞外，我們可以在第一個NavLink中添加上exact屬性澜沟；
默認的activeClassName：
--事實上在默認匹配成功時，NavLink就會添加上一個動態(tài)的active class峡谊；
--所以我們也可以直接編寫樣式
--當然倔喂，如果你擔心這個class在其他地方被使用了，出現樣式的層疊靖苇，也可以自定義class
NavLink的代碼
import React, { PureComponent } from "react";
import { BrowserRouter, NavLink, Link, Route } from "react-router-dom";
import "./App.css";
import About from "./pages/about";
import Home from "./pages/home";
import Profile from "./pages/profile";
class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
links: [
{ to: "/", title: "首頁" },
{ to: "/about", title: "關于" },
{ to: "/profile", title: "我的" },
],
};
}
render() {
return (
<div>
<BrowserRouter>
{/* 1.跳轉路徑的方式 */}
{/* <Link to="/">首頁</Link>
<Link to="/about">關于</Link>
<Link to="/profile">我的</Link> */}
{/* 1.2 需求：路徑選中時席噩，對應的a元素變?yōu)榧t色 NAVLink*/}
{/* <NavLink to="/" exact activeStyle={{ color:'red' }}>首頁</NavLink>
<NavLink to="/about" activeStyle={{ color:'red' }}>關于</NavLink>
<NavLink to="/profile" activeStyle={{ color:'red' }}>我的</NavLink> */}
<NavLink to="/" exact activeClassName = "link-active">首頁</NavLink>
<NavLink to="/about" activeClassName = "link-active">關于</NavLink>
<NavLink to="/profile" activeClassName = "link-active">我的</NavLink>
{/* 2.跳轉之后要顯示渲染的頁面 exact: 當你寫path:"/" 的時候 這個就是一個模糊匹配,所以加exact 是一個嚴格匹配切記*/}
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/profile" component={Profile} />
</BrowserRouter>
</div>
);
}
}
export default App;
Switch的作用
當我們匹配到某一個路徑時，我們會發(fā)現有一些問題贤壁；
--比如/about路徑匹配到的同時悼枢，/:userid也被匹配到了，并且最后的一個NoMatch組件總是被匹配到脾拆；
image.png
原因是什么呢馒索？默認情況下，react-router中只要是路徑被匹配到的Route對應的組件都會被渲染名船；
--但是實際開發(fā)中绰上，我們往往希望有一種排他的思想：
--只要匹配到了第一個，那么后面的就不應該繼續(xù)匹配了渠驼；
--這個時候我們可以使用Switch來將所有的Route進行包裹即可蜈块；
image.png
Redirect
image.png
