title: How to Return a Page by ID with react-routing?
body: <p>I'm just new to React and I'm having a hard time figuring out how to return a new page (a component) as I clicked the <strong>View</strong> button. I have a user table and per row has a <strong>View</strong> button. I can only retrieve the data in exactly the same page but I would like to retrieve my view details in another page with its id on the url, for example: http://user-details-1. Can someone help me with this. Thanks!</p>
  <p>Here's my view code/component:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import Form from &quot;react-bootstrap/Form&quot;;
  
  const ViewUserDetaiils = (props) =&gt; {
    const [user, setUser] = useState(props.currentUser);
  
    useEffect(() =&gt; {
      setUser(props.currentUser);
    }, [props]);
  
    return (
      &lt;Form&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;strong&gt;Id:&lt;/strong&gt; {user.id}{&quot; &quot;}
          &lt;/div&gt;
          &lt;div&gt;
            &lt;strong&gt;Name:&lt;/strong&gt; {user.name}{&quot; &quot;}
          &lt;/div&gt;
          &lt;div&gt;
            &lt;strong&gt;Contact:&lt;/strong&gt; {user.contact}{&quot; &quot;}
          &lt;/div&gt;
          &lt;div&gt;
            &lt;strong&gt;Email:&lt;/strong&gt; {user.email}{&quot; &quot;}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Form&gt;
    );
  };
  
  export default ViewUserDetails;
  </code></pre>
  <p>Here's my routing:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { BrowserRouter, Route, Switch } from &quot;react-router-dom&quot;;
  import Home from &quot;./containers/Home/Home&quot;;
  import ViewUserDetails from &quot;./forms/ViewUserDetails&quot;;
  import PageNotFound from &quot;./page404/page404&quot;;
  
  class App extends Component {
    render() {
      return (
        &lt;BrowserRouter&gt;
          &lt;div&gt;
            &lt;Switch&gt;
              &lt;Route exact path=&quot;/&quot; component={Home} /&gt;
              &lt;Route exact path=&quot;/home&quot; component={Home} /&gt;
              &lt;Route
                exact
                path=&quot;/view-contact-details/&quot;
                component={ViewUserDetails}
              /&gt;
              &lt;Route component={PageNotFound} /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  <p>And here's my code for the <strong>View</strong> button which is in another component(UserTable component).:</p>
  <pre><code>             &lt;Link to=&quot;/view-contact-details&quot;&gt;
                 &lt;Button
                    onClick={() =&gt; {
                      props.viewRow(user);
                    }}
                    className=&quot;Button muted-Button&quot;
                  &gt;
                    View
                  &lt;/Button&gt;
                &lt;/Link&gt;
  </code></pre>