一、 請你說說react的路由是什麼？
React的路由是純前端的路由，就是根據hash或browser path的變化，框架內封裝好了方法，可以自由的切換DOM展示，來模擬頁面或局部頁面被替換的目的；讓瀏覽器不用刷新，也能獲取想要的頁面結構，保存內存數據，提升用戶體驗
當url發生變化時，路由通過監聽url的變化，我們不僅能直接獲取和解析url路徑，並且通過路由匹配，展示相對應地組件，即React組件的展示，授權路由進行控制，保證了url和視圖的同步。
三、React-Router的路由的幾種模式
1.BrowserRouter:瀏覽器的路由模式，開發中最常用的模式，用 pushState 和 popState 事件構建路由
2.HashRouter:在路徑前加一個#號成爲一個哈希值，Hash模式的好處就是刷新網頁仍然能找到對應的路徑，用 hash 和 hashchange 事件構建路由，使用的方法有 go(), replace(), push()等，
3.MemoryRouter:不存儲History，所有路由保存在內存裏，不能前進後退，因爲地址欄沒有發生任何變化
4.NativeRouter:配合ReactNative使用，多用於移動端
5.StaticRouter:靜態路由，需要和後臺服務器配合設置
四、React 路由跳轉的幾種方式？
1. params形式
函數組件-傳參
|
1
2
3
4
5
6
7
8
|
import React from 'react'import { useHistory } from 'react-router-dom'export default ()=> { const history = useHistory() // 頁面跳轉方法 history.push({pathname: '/personal', search: 'test=22222'}) history.push({pathname: '/personal',state: 'test=22222'})
} |
函數組件-接受參數
|
1
2
3
4
5
6
7
8
|
import React from 'react'import { useLocation } from 'react-router-dom'export default ()=> { const location = useLocation() // 頁面跳轉方法 console.log(location, 'props') return 123} |
2. Link形式
Llink上攜帶傳遞的參數, 攜帶的參數以對象形式
|
1
2
3
4
5
|
<Link to={ { pathname: "/XXX", //xxx爲跳轉到的路徑 state: { title: this.state.exam.title, actionCode: this.state.exam.actionCode } } } >切換考試科目 <i className="iconfont icon-jiantou"></i></Link> |
類組件-接受參數
|
1
2
3
|
componentDidMount() { console.log(this.props.location.state.XXX); //xxx指state對象中的鍵名 } |
函數組件-接受參數
|
1
2
3
4
5
6
|
function Fast(props) { ... useEffect(() => { console.log(props.location.state.XXX);//xxx指state對象中的鍵名 })} |
3. url傳參
1.傳參
<Route exact path="/detail/:id" component={Detail}></Route>this.props.history.push({
pathname: '/detail', //要跳轉到的路徑 state: { //參數地址欄不顯示，刷新地址欄，參數不丟失 id: 456 } })}this.props.history.push({
pathname: '/detail', //要跳轉到的路徑 query: { //參數地址欄不顯示，刷新地址欄，參數不丟失 id: 456 } })}2. 接受參數
this.props.history.location.state
this.props.history.location.query
五、React-Router的<Link>標籤與<a>標籤有什麼區別
Link 組件最終會渲染爲 HTML 標籤 <a>，它的 to、query、hash 屬性會被組合在一起並渲染爲 href 屬性。雖然 Link 被渲染爲超鏈接，但在內部實現上使用腳本攔截了瀏覽器的默認行爲，然後調用了history.pushState 方法。
Link 只負責觸發 url 變更，Route 只負責根據 url 渲染組件
相比於 <a> 標籤，<Link> 避免了不必要的渲染
六、在history模式中push和replace有什麼區別？
push('')：添加一個新的記錄到歷史堆棧, history.length+1。（一般會用來跳轉到一個新頁面, 用戶點擊瀏覽器的回退按鈕可以回到之前的路徑。）
replace('')：替換掉當前堆棧上的記錄， history.length不變。
六、React-Router怎麼設置重定向？
採用 Redirect 進行重定向
七、React-Router怎麼獲取歷史對象？
1.如果React >= 16.8 時可以使用 React Router中提供的Hooks
import { useHistory } from "react-router-dom";
let history = useHistory();
2.使用this.props.history獲取歷史對象
let history = this.props.history;
九、react的路由和普通路由有什麼區別？
React路由是前端的路由，普通路由指的是後端的路由
React路由不管是hash還是browser的模式，都是在響應了hash/browser的change之後，再變更頁面的DOM結構，由於是單頁應用，頁面文件始終沒有變化;通過請求的path，然後相應不同的組件
十、請你說說react的路由的優缺點？
優點：
配置靈活
支持豐富的傳參
利用hashRouter也可以實現低版本瀏覽器的兼容
缺點：
v4之後使用url query的方式傳參比較繁瑣，解析時需要使用queryString 和 location.search
利用react-router的query或state進行傳參打開新的路由，刷新頁面後數據會丟失
BrowserRouter的模式需要服務器配合，保證在前端路由的切換範圍內，都只相應同一個html文件
BrowserRouter需要現代瀏覽器才能兼容
十一、React-Router 4怎樣在路由變化時重新渲染同一個組件？
1. 可以在這個組件的componentWillReceiveProps和shouldComponentUpdate生命週期方法中添加url變化的判斷，如果url判斷變化，變化了就會就會重新執行render()函數，組件變會進行重新渲染。
2. 在同一個組件添加不同的key,以下重新封裝了組件：
export default function (props) {
return (<組件 {...props} key={search參數} />)
}
想深度學習路由的小夥伴，可以參考其他作者的文章