最簡單的 react-router4 的安裝和使用

React-Router 的安裝 

npm install react-router

 

React-Router提供了兩個組件：Router和Route。下面看最簡單的例子:

src/Routes.js

 1 import React from 'react'
 2 import {Router,Route,browserHistory} from 'react-router'
 3 
 4 import Home from './pages/Home.js'
 5 import About from './pages/About.js'
 6 import NotFound from './pages/NotFound.js'
 7 
 8 const history = browserHistory;
 9 const Routes = () =>(
10   <Router history = {browserHistory}>
11     <Route path = "home" component = {home}>
12     <Route path = "about" component = {About}>
13     <Route path = "*" component = {NotFound}>
14   </Router >
15 );
16 export default Routes;

Routes.js文件返回一個組件，該組件輸出一個Router組件實例，路由及其規則都封裝在里面，Route組件內的path和component把路徑和組件對應起來。

路由鏈接：

  HTML的鏈接被點擊時會發生默認跳轉，這不符合單頁面應用的要求，所以React-Router提供了一個<Link>組件來支持路由鏈接。

  1.<link>組件產生html鏈接。

  2.對該鏈接的點擊不會引發跳轉，而是把目標路徑發送給Router，讓Router依據關聯顯示對應的組件。

  3.<Link>組件的to指向一個路徑，對應的路徑在Router中應該有定義。

 1 import React from 'react'
 2 import {Link} from 'react-router'
 3 
 4 const view = ()=>{
 5   <div>
 6     <ul>
 7       <li><Link to="/home">Home</Link></li>
 8       <li><Link to="/about">About</Link></li>
 9     </ul>  
10   </div>
11 };

嵌套：

Route提供了嵌套功能。路由的嵌套和組件層級的顯示是對應的。當我們觸發了子路由的跳轉時，父層路由顯示的東西可以依然保留在頁面上，只有子層路由對應的組件發生變更。

比如在src/pages/App.js中定義組件App：

 1 import React from 'react'
 2 import {view as TopMenu} from '../components/TopMenu'
 3 
 4 const App = ({children}) =>{
 5   return (
 6     <div>
 7       <TopMenu />
 8       <div>{children}</div>
 9     </div>
10   )
11 }
12 export default App

上面代碼中children是App的子組件。這是React中原生的特性。

React-Router中路由嵌套需要組件和Route的雙邊設置：

  在組件中將children獲得的子組件在恰當位置渲染；

  在Route中 ，則是設置嵌套的<Route>

1 const Routes = ()=>(
2   <Router history = {browserHistory}>
3     <Route path = "/" component = {App}>
4       <Route path = "hone" component={home} />
5       <Route path = "hone" component={home} />
6       <Route path = "hone" component={home} />
7     </Route>
8   </Route>
9 );