使用路由器反应 Material-UI

Question

我正在尝试使用 Material-UI 库构建简单的 React 应用程序。
我已经将示例应用程序用于 create-react-app并尝试向其中添加路由器，以便我可以在组件之间导航，但似乎 Material-UI 库添加的组件与 React-Router 库不能很好地配合使用。

是否有同时使用 react-router 和 material-ui 库的示例？

Answer 1

我最近在我的项目中使用了 material-ui 和 react-route-dom。 我的项目正在使用

1.create-react-app [react 16.5.2]

2. Material-UI [3.2.2]

3. react-router-dom [4.3.2]

索引.js

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

应用程序.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;

路由.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;

布局.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);

在我的示例中，我只是更新了主要内容的一部分。 所以我在 Layout.js 的 main 中添加了 ReactRouter

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

Answer 2

我有一个基本的样板项目示例，你可以克隆，我试一试。

该项目正在使用：
- 创建反应应用程序
- 反应路由器 3.0.2
- 材料界面 0.19.4

MaterialUI 示例：

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

旋转示例：

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