React Material-UI with Router

Question

I\'m trying to build simple React app using Material-UI library.
I\'ve used the example app for create-react-app and try to add Router to it so I can navigate between compon

Answer 1

I have recently used material-ui and react-route-dom in my project. My project is using

1.create-react-app [react 16.5.2]

2. Material-UI [3.2.2]

3. react-router-dom [4.3.2]

index.js

import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(, 
document.getElementById('root'));

App.js

import React, { Component } from 'react';
import ThemeDefault from './Theme/Theme';
import Layout from './components/Layout/Layout';

class App extends Component {

  render() {
    return (
      
        
      
    );
}
}

export default App;

Routes.js

const ReactRouter = () => {
return (
        
            
                
                
                
            
        

   )
 }
 export default ReactRouter;

Layout.js

     import ReactRouter from '../../routes';
       class Layout extends Component {

         render() {
          const { classes } = this.props;

          return (
            

             
               

                
               
               

                    
                 
             
           )

       }
     }


    Layout.propTypes = {
       classes: PropTypes.object.isRequired,
       theme: PropTypes.object.isRequired,
      };

       export default withStyles(styles, { withTheme: true })(Layout);

In my example I am just updating part in main content. So I have added ReactRouter inside main in Layout.js

 
  will have app bar
   For side navigation menu
  
     will contain the different components content