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中把

posted @ 2017-05-30 20:11  ArielChen  阅读(188)  评论(0编辑  收藏  举报