首頁  >  文章  >  web前端  >  react 4.0 路由怎麼跳轉

react 4.0 路由怎麼跳轉

藏色散人
藏色散人原創
2023-01-06 09:50:031551瀏覽

react4.0路由跳轉的方法:1、透過「npm install history --save」安裝「history」;2、在要跳轉的地方對應的js檔案中,引入createHashHistory並執行程式碼「import { createHashHistory } from 'history'createHashHistory().push('/share')」即可。

react 4.0 路由怎麼跳轉

本教學操作環境:Windows10系統、React-Router v4.0版、Dell G3電腦。

react 4.0 路由怎麼跳轉?

React-Router v4.0 hashRouter使用js跳轉

React-Router v4.0上已經不建議使用hashRouter,主推browserRouter,但因為使用browserRouter需要服務端配合可能造成不便,有時還是需要用到hashRouter。

下面是v4.0的React-Router中hashRouter以js方式跳轉的實作步驟。

v4.0剝離了history,所以要操作history,需要安裝支援包:

npm install history --save

在要跳轉的地方對應的js檔案中,引入createHashHistory並執行程式碼,以跳轉到'/share'舉例:

import { createHashHistory } from 'history'
createHashHistory().push('/share')

已經ok了。

在使用上述方法跳轉之前,需要確認已經定義Router,可參考下述程式碼:

import { HashRouter as Router, Route, Switch } from 'react-router-dom'
...
<Router>
  <App>
    <Switch>
      <Route path=&#39;/index&#39; component={显示的组件1}>
      <Route path=&#39;/share&#39; component={显示的组件2}>
      ...
    </Switch>
  </App>
</Router>

推薦學習:《react影片教學

以上是react 4.0 路由怎麼跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn