React-Router2

React Router2

由于对于新版的Router的不熟悉，这节开始转向Router2和webpack1，等待React-Router4理解后，我会更新这几章
以上Router采用的是Router2
Router中文是路由的意思。
路由库React-Router。它是官方维护的，事实上也是唯一可选的路由库。它通过管理 URL，实现组件的切换和状态的变化，开发复杂的应用几乎肯定会用到。

基本用法

$ npm install 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，变成了程序的入口
      <Router history={hashHistory}>

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

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

      </Router>
    );
  };
}

ReactDOM.render(<Root/>, document.getElementById('example'));

跳转时使用<Link>进行跳转
使用案例
在src/js创建入口文件root.js
在webpack中把

React Router参数传递

从Header中跳转到list传递数值。
利用在root.js中设置<Route component={ComponentList} path="list"></Route>中path="list/id:"。这个为定义的方法
在list中用{this.props.params.id}获取从Header路由传递过来的值
Header中使用<Link to={``/list/12341234``}>

上一页路由下一页React-router4

最后更新于4年前

这有帮助吗？