title: Using react-router-dom
body: <p>I split my routes into two files.</p>
  
  <pre><code>const masterRoutes=(
  
                        &lt;Switch&gt;
                        &lt;Route path="/diamond"  component={DiamondMaster}   /&gt;
                        &lt;Route path="/gram"     component={GramMaster}      /&gt;
                        &lt;/Switch&gt;
  
                      )
  
  export default masterRoutes; 
  
  
  
  const userRoutes=(
  
                        &lt;Switch&gt;
                        &lt;Route path="/user"  component={User}   /&gt;
                        &lt;Route path="/store" component={Store} /&gt;
                        &lt;Route path="/userlist" component={UserList} /&gt;
                        &lt;/Switch&gt;
  
  )
  
  
  
  export default userRoutes;
  </code></pre>
  
  <p>app.jsx is the main file handling all routes.</p>
  
  <pre><code>export class App extends Component {
    render() {
      return (
  
            &lt;div&gt;
  
  
                    &lt;Router history={history}  &gt;
                        &lt;div&gt;
                        &lt;AuthHeader isLoggedIn={true} /&gt;
                        &lt;Route path="/" component={AuthHeader} /&gt;                                 
                        &lt;Switch&gt;
                        &lt;Route path="/login" component={Login} /&gt;
                        &lt;Route path="/tab" component={SettingsComp} /&gt;
                         {userRoutes}
                         {masterRoutes}
                       &lt;/Switch&gt;
                        &lt;/div&gt;
                    &lt;/Router&gt;
              &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>It is working fine when i click user component But MasterRoutes is not working.</p>
  
  <p>App.jsx file doesn't take MasterRoutes file.
   Is there any other way to implement this?  </p>
  
  <p>I am bit new to reactjs. Please bear with my question.</p>