使用react構建單頁面應用:
實現方法:(1)react-router
(2)react-router-dom
react-router
: 實現了路由的核心功能,而react-router-dom依賴react-router,
react-router-dom
: 基於react-router
,加入了在瀏覽器運行環境下的一些功能:
Link
組件,會渲染一個a
標簽;
BrowserRouter組件,使用pushState
和popState
事件構建路由;
HashRouter
組件,使用window.location.hash
和hashchange
事件構建路由。
react-router-native
: 基於react-router
,類似react-router-dom
,加入了react-native
運行環境下的一些功能。
react-router-dom路由詳解:
靜態路由:
然后我們在index.js中引入路由組件進行渲染:
我們可以使用a
標簽或Link組件
進行路由的跳轉,Link從react-router-dom引入;
動態路由傳參:
第一種:在組件的路由后面加/:id;
然后我們在對應組件Detail中修改代碼來進行獲取ID:
第二種:
隱式傳參(通過函數跳轉):
重復使用push或a標簽跳轉會產生死循環,為了避免這種情況出現,react-router-dom提供了replace。在可能會出現死循環的地方使用replace來跳轉:
返回上級頁面使用: