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(<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

Answer 2

I have a basic boilerplate project example, you can clone and i give it a try.

The project is using :
- create-react-app
- react-router 3.0.2
- material-ui 0.19.4

MaterialUI example:

class App extends Component {
    render() {
        return (
            < MuiThemeProvider >
                    {this.props.children}
            </MuiThemeProvider >
        )
    }
}

Rotes example:

const Routes = (props) => (
    <Router {...props}>
        <Route path="/" component={App}>
            <IndexRoute component={Login} />
            <Route path="/login" component={Login} />
            <Route path="/register" component={Register} />
            <Route path="*" component={NotFound} />
        </Route>
    </Router>
)