React學習（3）——Router路由的使用和頁面跳轉

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、Page一、Page二、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組件。

    關於Page二、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相關文章，感謝各位支持。