title: How to create list and detail view using React Router DOM?
body: <p>I'm new in React and doesn't know how to create List and Detail view using React Router DOM. Some how I created it but I know this is not a good way to do it. If you look into below code, you will find it will always reload the whole page if I select another campaign. What will be the good way to do it. Please help...</p>
  <p>App.js</p>
  <pre><code>&lt;Switch&gt; 
     &lt;Fragment&gt;
         &lt;PrivateRoute exact path=&quot;/admin/campaigns/:id&quot; component={CampaignComponent}/&gt;
         &lt;PrivateRoute exact path=&quot;/admin/campaigns/:id/messages&quot; component={CampaignComponent}/&gt;
         &lt;PrivateRoute exact path=&quot;/admin/campaigns/:id/contacts&quot; component={CampaignComponent}/&gt;
     &lt;/Fragment&gt;
  &lt;/Switch&gt;
  </code></pre>
  <p>Campaign.js</p>
  <pre><code>let layout;
  
  switch (props.match.path) {
        case '/admin/campaigns/:id':
          layout = &lt;CampaignDetailComponent props={props}/&gt;;
          break;
  
        case '/admin/campaigns/:id/messages':
          layout = &lt;CampaignMessageListComponent props={props}/&gt;;
          break;
  
        case '/admin/campaigns/:id/contacts':
          layout = &lt;CampaignContactListComponent props={props}/&gt;;
          break;
  
        default:
          layout = &lt;div/&gt;;
  }
  
  
  return (
       &lt;div&gt;
            &lt;div className=&quot;col-6&quot;&gt;
              &lt;CampaignListComponent props={props}/&gt;
            &lt;/div&gt;
            &lt;div className=&quot;col-6&quot;&gt;
              {layout}
            &lt;/div&gt;
       &lt;/div&gt;
  )
  </code></pre>
  <p>So, in the first <code>col-6</code> I want to show the list of Campaigns and in second <code>col-6</code> I want to render the components as per route change.</p>
  <p>You can follow <a href="https://codesandbox.io/s/eager-microservice-8ktzq" rel="nofollow noreferrer">this link</a> to see the actual working code sample that demonstrate this issue.</p>