React-Router的中文文檔可以參照如下鏈接:
http://react-guide.github.io/react-router-cn/docs/Introduction.html
文檔中介紹的很詳細,下面將通過個人視角介紹Router的用法,並通過實例來呈現,可以給各位作為參考,記錄個人心得。
一個網站,光有首頁是不夠的,需要添加頁面跳轉功能,才能讓訪問者逐層地看到網站豐富的內容。傳統的前端頁面使用超鏈接的方式進行跳轉,比如:HTML標簽中的 <a href=' '>點擊</a> ,瀏覽器獲取到鏈接地址后,會根據這個地址進行訪問。
然而,React框架采用的Router卻不是傳統的鏈接跳轉。因為,嚴格來說,React項目中的內容都是呈現在一張HTML中的,正如之前文章中介紹過的 index.html,
那么,在一張頁面中,我們該如何去實現頁面跳轉呢。Router就提供了頁面跳轉渲染的方法,React應用會根據鏈接地址去決定要渲染的內容。也就是說,鏈接地址不再是用於直接跳轉,而是告訴React,我需要怎么樣的內容,讓React進行渲染。
通俗來講,就像去采購東西,我給你一張清單,你按照清單上的內容去獲取相應的物件。
下面就直接通過實例來介紹React中Router的用法。
首先,我們打開已經構建完成的React項目目錄,本人采用的是VScode編輯器
我們刪去src目錄下的所有文件,創建index.js文件,內容如下
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App/>, document.getElementById('root'));
然后創建App.js文件,內容如下:
import React from 'react'; import { BrowserRouter as Router,Route} from 'react-router-dom'; import Home from './Home'; import Page1 from './Page1'; import Page2 from './Page2'; import Page3 from './Page3'; class App extends React.Component { render(){ return( <Router > <div> <Route path="/" component={Home} /> <Route path="/Page1" component={Page1} /> <Route path="/Page2" component={Page2} /> <Route path="/Page3" component={Page3} /> </div> </Router> ) } } export default App;
下面來分析一下,在上方的import中,載入了 BrowserRouter as Router 和 Route,其意思就是從react-router-dom
包中導入Router和Route,BrowserRouter是Router中的一種。
然后,下面依次引入了Home、Page1、Page2、Page3這四個組件,組件的內容之后會給出。
在組件的render函數的return里面,我們可以看到一對<Router>標簽包含了四個<Route>標簽,每個<Route>標簽中都包含了path屬性和component屬性,path 屬性用於儲存路徑,就是網站主頁路徑后面的內容,假如網站地址是localhost:3000,那么,locahost:3000后面的字符串就是path屬性的內容。(注意,Router只能有一個子組件,所以要把所有Route標簽用一個div包裹起來)
然后是 component 屬性,其中儲存了組件名稱,當我們訪問特定地址時就會渲染該組件,也可以稱其為這一個路由的入口組件,可以由這個組件延伸開來搭建頁面。
Home組件的內容如下(Home.js):
import React from 'react'; class Home extends React.Component{ render(){ return( <div> <div>This is Home!</div> </div> ); } } export default Home;
用於顯示div標簽中的This is Home!語句。
Page1-Page3組件類似,內容為:
import React from 'react'; class Page1 extends React.Component{ render(){ return( <div> <div>This is Page1!</div> </div> ); } } export default Page1;
然后我們就可以來嘗試一下訪問這些頁面,比如,我們在瀏覽器地址欄中輸入localhost:3000/
可以看到:
當我們訪問 localhost:3000/Page1 的時候就會看到
這里會產生一個疑問,為什么我們訪問 /Page1 路徑的時候會渲染Home組件的內容。
這是因為Home組件所在路由的 path為 “/”,而“/Page1”開頭包含了 “/”,React就會默認渲染Home組件。
如果想在訪問其他地址時不顯示Home組件,可以在Home組件所在Route標簽中加入 exact ,如下:
<div> <Route exact path="/" component={Home} /> <Route path="/Page1" component={Page1} />
這樣一來,當我們訪問 localhost:3000/Page1 時就不會默認渲染Home組件。
關於Page2、Page3的訪問也是一樣,現在為止,我們可以通過輸入地址的方式進行訪問,但依然不夠方便,那么我們就要設置一些訪問入口,也就是傳統頁面中“超鏈接”所在地。
我們在Home組件中做如下更改:
import React from 'react'; import { Link } from 'react-router-dom'; class Home extends React.Component{ render(){ return( <div> <div>This is Home!</div> <div> <Link to="/Page1/" style={{color:'black'}}> <div>點擊跳轉到Page1</div> </Link> <Link to="/Page2/" style={{color:'black'}}> <div>點擊跳轉到Page2</div> </Link> <Link to="/Page3/" style={{color:'black'}}> <div>點擊跳轉到Page3</div> </Link> </div> </div> ); } } export default Home;
首先,我們要在上方用 import 引入一個 Link組件,這個組件由react-router-dom內部定義,用於鏈接跳轉,在render函數的return中設置3對Link標簽,to后面填寫Page1的地址(“/Page1/”、“/Page1”皆可),並包含跳轉鏈接的文字。
(style是設置字體顏色樣式,可加可不加,關於樣式的設置以后的文章中會講到)
現在,我們訪問 localhost:3000/ 可以看到:
點擊其中一個鏈接就可以跳轉到特定的頁面,比如Page1:
注意,這里的跳轉並沒有訪問新的html文件,而是由React改變了原本html頁面中的內容。
現在,我們已經成功地使用 Router、Route 和 Link 實現了React頁面跳轉的功能,之后還會更新React相關文章,感謝各位支持。