首页 > 使用react-bootstrap-table 在实现页面跳转时找不到目标页面,请问是怎么回事?

使用react-bootstrap-table 在实现页面跳转时找不到目标页面,请问是怎么回事?

我的问题是:点击修改,进入到修改页面,要怎么破?

table数据:

import React, {Component} from 'react';
import {render} from 'react-dom';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import ReactBootstrap , {Panel,Buttons,Button,ButtonToolbar,Modals,Overlays} from 'react-bootstrap';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router';
import ChangeEitd from './ChangeEitd.js';

//数据
const products = [];

//修改跳转
//const buttonsInstance = (
//    <ButtonToolbar>
//        <Button id="change" bsStyle="link">修改</Button>
//        <Button id="see" bsStyle="link">查看</Button>
//    </ButtonToolbar>
//)

function addProducts(quantity) {
    const startId = products.length;
    for (let i = 0; i < quantity; i++) {
        const id = startId + i;
        products.push({
            id: id,
            name: '',
            title: "猪为什么那么能吃",
            creatTime: "2016-04-05",
            createOn:  "陈文飞",
            clicks: 200,
            reads: 256
        });
    }
}
//添加数据
addProducts(50);

//组件
export default class Table extends Component {
    //初始化值
    constructor(props){
        super(props);
        this.state = {name: ""}
    }

    //单元格自定义内容
    nameFormat(cell,row){
        return (
            <div>
                **<Link to={{ pathname: '/ChangeEitd', query: row}}>修改</Link>**
            </div>
        )

    }



    render() {
        //选择复选框
        const selectRowProp = {
            mode: "checkbox",
            clickToSelect: false
        };

        const BootTable = (
            <BootstrapTable data={products} striped={true} hover={true} pagination={true} insertRow={true}
                            deleteRow={true} selectRow={selectRowProp}>
                <TableHeaderColumn isKey={true} dataField="id">ID</TableHeaderColumn>
                <TableHeaderColumn dataField="name" dataFormat={this.nameFormat}>操作</TableHeaderColumn>
                <TableHeaderColumn dataField="title">文章标题</TableHeaderColumn>
                <TableHeaderColumn dataField="createOn">创建人</TableHeaderColumn>
                <TableHeaderColumn dataField="creatTime">创建时间</TableHeaderColumn>
                <TableHeaderColumn dataField="clicks">点击数</TableHeaderColumn>
                <TableHeaderColumn dataField="reads">阅读数</TableHeaderColumn>
            </BootstrapTable>
        )



        return (
            <div>
                {BootTable}
            </div>
        )
    }

}

渲染到页面时使用了Router:

import React from 'react';
import {render} from 'react-dom';
import TableList from '../news/create_article/article_list.js';
import ChangeEitd from '../news/create_article/ChangeEitd.js';
import { Router , Route , IndexRoute , browserHistory } from 'react-router';
import ReactBootstrap, {Modal,open} from 'react-bootstrap';

render((
    <Router history={browserHistory}>
        <Route path="/" component={TableList}>
            **<Route path="/ChangeEitd" component={ChangeEitd} />**
        </Route>
    </Router>
),document.getElementById('table'));

现在的情况是,我点击了修改,在URL里也找到了当前行的修改后的URL:

但是就是不跳转。。。。

抱大腿了!大神们,求赐教!!

【热门文章】
【热门文章】