1、react中路由
react路由存在兩種，一種是react-router，另外是react-router-dom，區(qū)別的話則是看是否能通過dom去控制路由。
-
react-router提供了一些router的核心api，例如：Router，Route，Switch等，但是它沒有提供dom操作進行跳轉(zhuǎn)的api。 -
React-router-dom提供了BrowserRouter，Route，Link等api，動態(tài)的，可以去使用dom的事件去控制路由
2、BrowerserRouter路由和HashRouter路由
兩者都是路由的基本，都是進行路由地址的分發(fā)，HashRouter是通過hash值來對路由進行控制的，如果使用的是hash模式的話，你的路由則會默認存在一個#號。
BrowerserRouter的原理是使用HTML5 history API來使內(nèi)容隨著url動態(tài)的去改變。
3、Route的作用
Route主要的作用就是去控制路徑對應(yīng)顯示的組件，默認的是模糊匹配的，比如一般首頁的路徑/以及其他的url地址/user，都是會被匹配到的，因此，它也提供了一些標簽屬性用于解決這類問題。
-
exact：精準匹配，控制匹配到
/路徑時會不再繼續(xù)向下匹配 -
path：標識路由的路徑，
/path/:id路由參數(shù) - component：表示路徑對應(yīng)顯示的組件
4、路由跳轉(zhuǎn)的Link和NavLink的區(qū)別
二者都是可以控制路由跳轉(zhuǎn)的，標簽中含有to屬性，后面接著的可以是string類型或者object，來控制url的跳轉(zhuǎn)，二者不同的再于NavLink它可以為當前選中的路由設(shè)置類名、樣式以及回調(diào)函數(shù)等。
代碼示例：
import React, { Component } from 'react';
import {
NavLink,
Route,
BrowserRouter as Router
} from 'react-router-dom'
export default class ReactRouter extends Component {
render() {
return (
<>
<Router>
<NavLink to={'/'}>首頁</NavLink>
<NavLink to={'/news'}>新聞</NavLink>
<NavLink to={'/play'}>娛樂</NavLink>
<NavLink to={'/hot'}>熱門</NavLink>
<Route exact path={'/'} render={(props)=>{
console.log(props);
return <h1>首頁</h1>
}
}/>
<Route exact path={'/news'} render={(props)=>{
console.log(props);
return <h1>新聞</h1>
}
}/>
<Route exact path={'/play'} render={(props)=>{
console.log(props);
return <h1>娛樂</h1>
}
}/>
<Route exact path={'/hot'} render={(props)=>{
console.log(props);
return <h1>熱門</h1>
}
}/>
</Router>
</>
)
}
}
編譯結(jié)果.png
5、路由重定向Redirect
路由的重定義廣泛的用途一是登錄頁進去后頁面的重定向定位以及錯誤URL跳轉(zhuǎn)到的403頁面。
from = "*" to="/"
6、Switch切換路由
Switch會包裹Route，它里面不能放其他的html元素，只能用來顯示一個路由，主要作用體現(xiàn)在匹配路由時只會從上往下匹配對應(yīng)的一個路由。
7、params與query
-
this.props.match來獲取路由(/news/list123)參數(shù) - 可以通過
node-url來獲取路由(/news/list?id=123&a=456&b=789)參數(shù)
代碼示例
<Router>
<NavLink exact to={'/'}> 首頁</NavLink>
<NavLink to={'/news'}>新聞</NavLink>
<NavLink to={{ pathname: '/play', search: '?uid=1001' }}>開發(fā)者</NavLink>
<NavLink to={{ pathname: '/hot', query: { uid: '2301' } }}>客戶</NavLink>
<Route exact path={'/'} render={(props) => {
console.log(props);
return <h1>首頁</h1>
}
} />
<Route exact path={'/news'} render={(props) => {
console.log(props);
return <h1>新聞</h1>
}
} />
<Route exact path={'/play'} render={(props) => {
console.log(props);
return <h1>開發(fā)者</h1>
}
} />
<Route exact path={'/hot'} render={(props) => {
console.log(props);
return <h1>客戶</h1>
}
} />
</Router>
編譯結(jié)果.png
編譯結(jié)果.png
5、Switch的使用
Switch中，執(zhí)行機制是從上往下的，因此在匹配路由的過程中是會從上往下去篩選，當用戶在地址欄上輸入的url地址與代碼中的路由是相匹配的，那么就會跳轉(zhuǎn)到相應(yīng)的頁面，如果輸入錯誤的url，則會展示底部的*匹配所有路由的404頁面。
import React, { Component } from 'react';
import {
NavLink,
Route,
BrowserRouter as Router,
Switch
} from 'react-router-dom'
export default class ReactRouter extends Component {
render() {
return (
<>
<Router>
<NavLink exact to={'/'}> 首頁</NavLink>
<NavLink to={'/news'}>新聞</NavLink>
<NavLink to={{ pathname: '/play', search: '?uid=1001' }}>開發(fā)者</NavLink>
<NavLink to={{ pathname: '/hot', query: { uid: '2301' } }}>客戶</NavLink>
<Switch>
<Route exact path={'/'} render={(props) => {
console.log(props);
return <h1>首頁</h1>
}
} />
<Route exact path={'/news'} render={(props) => {
console.log(props);
return <h1>新聞</h1>
}
} />
<Route exact path={'/play'} render={(props) => {
console.log(props);
return <h1>開發(fā)者</h1>
}
} />
<Route exact path={'/hot'} render={(props) => {
console.log(props);
return <h1>客戶</h1>
}
} />
{/* 404頁面處理方式 */}
<Route path={'*'} render={(props) => {
console.log(props);
return <h1>404，頁面不存在!</h1>
}
} />
</Switch>
</Router>
</>
)
}
}
編譯結(jié)果.png
