0

This is an index page.

import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import {Router, Route, browserHistory} from "react-router";

import {EmployeeList} from "./employeeList";
import {EditForm} from "./edit";


class App extends React. Component{ 
    render(){
        return (
            <BrowserRouter history={browserHistory}>
                <switch>
                    <Route path={"/"} component={EmployeeList} />
                    <Route path={"edit/:id"} component={EditForm} />    
                </switch>   
            </BrowserRouter>
        );
    }
}

render(<App />, window.document.getElementById("app"));

this is an employee page from this page..after clicking button i want fetch id and need to pass to edit js page where i need call anthor api with this fetched id.

import React from "react";
import {browserHistory} from "react-router";
import { createHashHistory } from 'history';

export class EmployeeList extends React. Component {
    constructor(props) {
        super(props);
        this.state = { 
            students: [],
        }
        this.onNavigateEdit = this.onNavigateEdit.bind(this);
    };


    onNavigateEdit() {
        //alert(id);
        this.browserHistory.push("/edit");
     }


    componentDidMount() {
        fetch('https://api.myjson.com/bins/bz92u')
            .then(response => response.json())
            .then((responseJson) => {
                this.setState({ students: responseJson.students })
            })
    }


    render() {

        const student = this.state.students.map((item, i) => (
            <tr>
                <td>{item.id}</td>
                <td>{item.fname}</td>
                <td>{item.lname}</td>
                <td>
                    <button className="btn btn-primary" onClick={this.onNavigateEdit}>
                        EDIT
                    </button>
                </td>
            </tr>
        ));
        return (
            <div>
                <table class="table table-dark table-striped">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Button</th>
                        </tr>
                    </thead>
                    {student}
                </table>
            </div>
        );

    }
}

this is an edit js page.

import React from "react";
import { render } from "react-dom";

export class EditForm extends React. Component {
    constructor(props) {
        super(props);
        this.state = { 
            students: []
        }
    };


    render() {
        return (
            <div></div>
        );
    }
}

M getting type error is Cannot read property 'push' of undefined. so m consfused with white router method need to be use.

Mahesh Kadam
  • 13
  • 5
  • browserHistory is not an export in react-router v4, so if you import browserHistory you can't be using it like this.browserHistory since its not an function defined in the component . Check the duplicate on how to navigate programatically – Shubham Khatri Jun 12 '18 at 10:27
  • this.props.history.push("/edit"); this is aslo not working for me after importing history – Mahesh Kadam Jun 12 '18 at 10:33
  • you need not import history, the duplicate clearly explains what you need to do, you need to get history from props, if its not available use withRouter – Shubham Khatri Jun 12 '18 at 10:34
  • onclick i want pass id with page call – Mahesh Kadam Jun 12 '18 at 10:34
  • Check https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-in-react-router-v4/45263164#45263164 – Shubham Khatri Jun 12 '18 at 10:35
  • m getting an error is Cannot read property 'push' of undefined. if possible please correct my code. – Mahesh Kadam Jun 12 '18 at 10:37
  • instead of `export class EmployeeList extends React. Component` write ` EmployeeList extends React. Component` and at the end write `export default withRouter(EmployeeList)`, also don't forget to `import { withRouter } from 'react-router'` – Shubham Khatri Jun 12 '18 at 10:43

0 Answers0