目錄
1.路由介紹
2.路由使用
3.路由組件和一般組件
4.Switch 單一匹配
5.解決二級路由樣式丟失的問題
6.路由精準匹配和模糊匹配
7.Redirect路由重定向
1.路由介紹
路由是根據(jù)不同的 URL 地址展示不同的內(nèi)容或頁面，在 SPA 應用中，大部分頁面結(jié)果不改變，只改變部分內(nèi)容的使用。一個路由其實就是一個映射關(guān)系。
前端路由常見的兩種模式：hash和history
hash模式：路由上會有個#號，#后面?hash?值的變化，并不會導致瀏覽器向服務器發(fā)出請求，瀏覽器不發(fā)出請求，也就不會刷新頁面。使用 Javascript 來對 location.hash 進行賦值，改變 URL 的hash值，每次?hash?值的變化，會觸發(fā)hashchange?這個事件。然后我們便可以監(jiān)聽hashchange來實現(xiàn)更新頁面部分內(nèi)容的操作。
history模式：使用history模式可以讓URL看起來更加友好，更符合傳統(tǒng)的URL訪問習慣，不會出現(xiàn)#號，更加好看。當用戶刷新頁面之類的操作時，瀏覽器會給服務器發(fā)送請求，所以這個實現(xiàn)需要服務器的支持，需要把所有路由都重定向到根頁面（nginx配置try_files重定向到index.html），否則會出現(xiàn)404。HTML5 提供了 History API 來實現(xiàn) URL 的變化，其中最主要的 API 有以下兩個：
history.pushState() 新增一個歷史記錄
history.replaceState() 直接替換當前的歷史記錄
2.路由使用
- 安裝【npm?i?react-router-dom@5】
- 引入使用到的一些標簽【import{Link,Route}from?'react-router-dom'】
- 編寫路由鏈接【Link,NavLink】
- 注冊路由【?<Route path="/home" component={Home}></Route>】
- 路由包裹【ReactDOM.render(<BrowserRouter> <App/> </BrowserRouter>, document.getElementById("root"));】整個?App?組件標簽采用?BrowserRouter （或使用HashRouter）標簽包裹，這樣整個?App?組件都在一個路由器的管理下。
{/* 編寫路由鏈接*/}
<Link to="/home">Home</Link>
<NavLink activeClassName="nav-active" to="/home">Home</NavLink>
<MyNavLink to="/home">Home</MyNavLink> //通過封裝把冗長的NavLink上的標簽放到組件上去了NavLink給a標簽帶上了active屬性（高亮設置）,通過activeClassName 來修改默認的高亮類名
【MyNavLink組件】
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom/cjs/react-router-dom'
export default class MyNavLink extends Component {
render() {
console.log("MyNavLink接收父組件傳值props",this.props);
return (
<NavLink activeClassName="nav-active" {...this.props}></NavLink>
)
}
}在標簽體內(nèi)寫的內(nèi)容都會成為一個?children?屬性，因此我們在調(diào)用?MyNavLink?時，在標簽體中寫的內(nèi)容，都會成為?props?中的一部分。如下MyNavLink標簽內(nèi)的內(nèi)容Home會成為props的children屬性
<MyNavLink to="/home" a={1} b={2}>Home</MyNavLink>
3.路由組件和一般組件
- 寫法不同：一般組件【<Home/>】，路由組件【?<Route path="/home" component={Home} />】
- 存放的位置不同：路由組件放在 pages 文件夾中，一般組件放在?components文件夾中
- 最重要的一點就是它們接收到的?props?不同，在一般組件中，如果我們不進行傳遞，就不會收到值。而對于路由組件而言，它會接收到?3?個固定屬性?history?、location?以及?match
history:
go: ? go(n)
goBack: ? goBack()
goForward: ? goForward()
push: ? push(path, state)
replace: ? replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: {}
path: "/about"
url: "/about"
4.Switch 單一匹配
?當/about路徑匹配上了第一個About?組件后，它還會繼續(xù)向下匹配Test組件，采用?Switch?組件進行包裹后只進行單一匹配，不會再向下去匹配了，可以提高路由匹配效率。
5.解決二級路由樣式丟失的問題
當index.html以相對路徑方式引入css文件時，【 <link href="./css/bootstrap.css" rel="stylesheet">】（該文件放在public/css路徑下）在如下二級路由的情況下存在刷新頁面導致樣式丟失的問題。
<MyNavLink to = "/base/about" >About</MyNavLink>
<Route path="/base/about"component={About}/>
http://localhost:3000是webpack內(nèi)置的服務器，通過devServer開啟的。public文件夾相當于是localhost:3000的根路徑。
當刷新頁面后，獲取bootstrap.css文件的請求路徑上帶了base，并且返回狀態(tài)碼200，請求成功，這是因為請求的資源不存在時，會把index.html響應給該請求，所以狀態(tài)碼為200。
?(1)使用絕對路徑/
<link href="/css/bootstrap.css" rel="stylesheet">
(2)使用PUBLIC_URL%
<link href="%PUBLIC_URL%/css/bootstrap.css" rel="stylesheet">
(3)使用HashRouter
因為HashRouter會添加#，默認不會處理#后面的路徑，所以也是可以解決的
6.路由精準匹配和模糊匹配
模糊匹配可以理解為，在匹配路由時，只要有匹配到的就好了，要求輸入的路徑必須包含匹配的路徑，且順序要一致
<MyNavLink to = "/home/a/b" >Home</MyNavLink>
<Route path="/home"component={Home}/>
精準匹配：兩者必須相同，通過exact開啟嚴格匹配
<Route exact={true} path="/home" component={Home}/>
或者
<Route exact path="/home" component={Home}/>
嚴格匹配不要隨便開啟，需要再開，有些時候開啟會導致無法繼續(xù)匹配二級路由。文章來源：http://www.zghlxwxcb.cn/news/detail-492325.html
7.Redirect路由重定向
當沒有匹配到/home /about路徑時，重定向到/home路徑文章來源地址http://www.zghlxwxcb.cn/news/detail-492325.html
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
<Redirect to="/home"/>
</Switch>到了這里，關(guān)于react---react router 5 基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
