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 components but it seems that the components added by Material-UI library do not play well with React-Router library.

Is there an example of both react-router and material-ui libraries used together?

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(<BrowserRouter><App /></BrowserRouter>, 
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 (
      <ThemeDefault>
        <Layout></Layout>
      </ThemeDefault>
    );
}
}

export default App;

Routes.js

const ReactRouter = () => {
return (
        <Fragment>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/home" component={Home} />
                <Route path="/login" component={Login} />
            </Switch>
        </Fragment>

   )
 }
 export default ReactRouter;

Layout.js

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

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

          return (
            <div className={classes.root}>
             <CssBaseline></CssBaseline>
               <Header clicked={this.handleDrawerToggle} classes= . 
                   {classNames(classes.appBar, this.state.openSideDrawer && 
                     classes.appBarShift)}>
                </Header>
               <SideDrawer open={this.state.openSideDrawer}></SideDrawer>
               <main className={classNames(classes.content, 
                 this.state.openSideDrawer && classes.contentShift)}>
                    <ReactRouter></ReactRouter>
                 </main>
             </div>
           )

       }
     }


    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

 <Header>  will have app bar
 <SideDrawer>  For side navigation menu
  <main>     will contain the different components content