Routing with parameter issue in ReactJS

react router query params
react router multiple query params
react-router redirect with query params
how to pass parameter in url in reactjs
react-router multiple params
react get url params without router
react router params props
react-router remove query params

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

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

Routing with parameter issue in ReactJS, You have specified the Route with path /contactDetails/:id in ContactList component which won't be called if the Route isn't contactList and  So that’s what I wanted to share today: How to add, and later access, multiple route parameters in a ReactJS project upon redirect using react-router-dom, the most popular router for React

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>

Route Params ― Scotch.io, That last part of the URL is the parameter. With react-router-dom , we designate a dynamic portion of the URL to be matched by putting a colon ( : ) before it. ReactJS Routing Routing is the process where user is directed to or rendered different pages based on user action/requests. In React, we can build Single Page Application (SPA) where web app loads a single page and dynamically updates that page as the user interacts with the web app.

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

React Router: Declarative Routing for React.js, React Router - Basic. A simple example deployed using react-codesandboxer. 1.4M. 15. 884. Edit Sandbox. Files. example.js. index.html. index.js. package.json​. In React, there is an inbuilt package called react-router which is used to implement routing in reactjs when we create a new application using create-react-app.To install and create new react app we need to install it in our system.

React Router - Basic, where the key is the name we specified when creating the route and the value is the actual value in the URL. React Router is currently the de facto routing solution for react single page applications. React Router has some great features to offer and I usually end up using React Router for most of my react js applications. One of the reasons that make React Router so popular is that it is very easy to use.

React Router Parameters ← Alligator.io, An overview of using parameters with React Router 4. It's just a matter of the path property of a Route ; any segment that starts with a colon  React is a JavaScript library for building user interfaces. We can also extend it to build multi-page applications with the help of React Router. This is a third-party library that enables routing in our React apps. In this tutorial, we are going to cover everything you need to know to get started with React Router. * Setting up the project * What is routing? * Setting up the router

ReactJs: Passing url param to outside functions - JavaScript, I'm having issues passing a url parameter into a function that dispatches a from 'express' import {matchRoutes} from 'react-router-config' import Routes from '. URL parameters are parameters whose values are set dynamically in a page’s URL. This allows a route to render the same component while passing that component the dynamic portion of the URL so it can change based off of it. A practical example of this would be Twitter’s profile pages. If rendered by React Router, that route may look like this.

Comments
  • what is the url after you click the link?
  • /Contactdetails/1 - Something like this. I after I click, it changes the url, I could not see anything on page
  • please open the browser console some error may persist in it
  • understood why this is happening, check my answer.
  • @UbiquitousDevelopers: try with Danyal soultion that's the issue
  • 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