Routing with parameter issue in ReactJS

Question

I am making simple employee list and detail demo into ReactJS. I have employee list component which shows list of all employee fetch from some dummy rest web service and shows on page.

class contactList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      employees: [],
    };
  }

  componentDidMount() {
    this.EmployeeList();
  }
  EmployeeList() {
    fetch('https://jsonplaceholder.typicode.com/comments')
      .then(response => response.json())
      .then(results => {
        this.setState({ employees: results })
        .catch(
          error => { console.log(error); }
        );
      });

  }
  onDelete(e) {

  }

  render() {
    console.log(this.state.employees);
    const persons = this.state.employees.map((item, i) => (
      <div>
        <table>
          <tbody>
            <tr>
              <td>
                <Link to={"/Contactdetails/" + item.id} >{item.name}</Link>
                <Route exact path={"/Contactdetails/:id"} component={Contactdetails}></Route>
              </td>
              <td>
                <button onClick={this.onDelete}>
                  Delete
                                </button>
              </td>
            </tr>

          </tbody>
        </table>
        {/* <Link to="/">Delete</Link> */}
      </div>
    ));

    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">{persons}</div>
      </div>
    );
  }

I've shown all a tags with corresponding id(parameter) on the page. Issue when I click on link, it doesn't take me to detail page. In detail page, I kept alert as well in render method, but it is also not appearing, So, I think detailpage is not getting call.

class Contactdetails extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }
    componentWillMount(){
        alert("Helloo");
    }

    componentDidMount() {
        console.log("props: ", this.props.match)
        this.EmployeeDetails();
    }

    EmployeeDetails() {
        fetch('http://dummy.restapiexample.com/api/v1/employees')
            .then(response => response.json())
            .then(results => { this.setState({ employees: results }) });
    }
    render() {
        alert("Hello");
        return (
            <h2>Contact Details</h2>
        )
    }
};

StackBlitz link: https://stackblitz.com/edit/react-f4eha2?file=Contactdetails.js

/Contactdetails/1 - Something like this. I after I click, it changes the url, I could not see anything on page — Hardik Gondalia
– Hardik Gondalia, Commented Jan 21, 2019 at 7:45
please open the browser console some error may persist in it — Dhaval Patel
– Dhaval Patel, Commented Jan 21, 2019 at 7:48
@UbiquitousDevelopers: try with Danyal soultion that's the issue — Dhaval Patel
– Dhaval Patel, Commented Jan 21, 2019 at 7:53

Danyal Imran · Accepted Answer · 2019-01-21 07:48:42Z

2

Add the details page route to your main router file rather than inside ContactList.js. This is because it will never get called since your application looks for routes from the main router file or page.

<Switch>
  // Your Routes
  <Route exact path={"/Contactdetails/:id"} component={Contactdetails} />
  // The '/Contactdetails' route after /:id route since it will other wise not call the above one
</Switch>

answered Jan 21, 2019 at 7:48

Danyal Imran

2,60515 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Khatri · Accepted Answer · 2019-01-21 07:55:55Z

1

You have specified the Route with path /contactDetails/:id in ContactList component which won't be called if the Route isn't contactList and hence you don't see the ContactDetails component. You instead need to define your Routes like

  <Route path="/contactList" component={ContactList} />
  <Route exact path={"/Contactdetails/:id"} component={Contactdetails} />
  <Route path="/addContact" component={AddContact} />

Working demo

answered Jan 21, 2019 at 7:55

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Comments

Dhaval Patel · Accepted Answer · 2019-01-21 07:44:16Z

0

In that case, you need to first implement the router which can register the routs of your app like

<Route path="/contactList" component={ContactList} />
<Route path="/addContact" component={AddContact} />

Please check details about it React Router

edited Jan 21, 2019 at 7:44

answered Jan 21, 2019 at 7:41

Dhaval Patel

7,6116 gold badges43 silver badges72 bronze badges

1 Comment

Hardik Gondalia Over a year ago

My other routing are working, only detail routing is not working. you can check stackblitz link as well. it should either work all or not all, if issue with router

Collectives™ on Stack Overflow

Routing with parameter issue in ReactJS

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related