react ---- Router路由的使用和頁面跳轉

 

React-Router的中文文檔可以參照如下鏈接：

        http://react-guide.github.io/react-router-cn/docs/Introduction.html

首先，我們打開已經構建完成的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頁面跳轉的功能.