React Router概念

React Router概念

因爲對於新版的Router的不熟悉，這節開始轉向Router2和webpack1，等待React-Router4理解後，我會更新這幾章 Router 以上Router採用的是Router2 Router中文是路由的意思。 路由庫React-Router。它是官方維護的，事實上也是惟一可選的路由庫。它經過管理 URL，實現組件的切換和狀態的變化，開發複雜的應用幾乎確定會用到。 基本用法

$ npm install -S react-router安裝React-Router，最新的爲React-Router4。 import React from 'react'; import ReactDOM from 'react-dom'; import Index from './index'; import ComponentList from './components/list'; import ComponentDetails from './components/details'; import {Router,Route,hashHistory} from 'react-router';

export default class Root extends React.Component{ render(){ return ( //這裏替換了以前的 Index，變成了程序的入口

<Route component={Index} path="/">
      <Route component={ComponentDetails} path="details"></Route>
    </Route>

    <Route component={ComponentList} path="list"></Route>

  </Router>
);

}; }

ReactDOM.render( , document.getElementById('example')); 跳轉時使用 進行跳轉 使用案例

在src/js建立入口文件root.js 在webpack中把