Question

我正在尝试使用Material-UI库构建简单的React应用程序我已经使用了example app for create-react-app并尝试将路由器添加到它，因此我可以在组件之间导航，但似乎Material-UI库添加的组件与React-Router库不兼容。

是否有一起使用react-router和material-ui库的例子？

Answer 1

我有一个基本的boilerplate project示例，您可以克隆并尝试一下。

该项目正在使用：
- create-react-app
- react-router 3.0.2
- material-ui 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>
)

Answer 2

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

1.create-react-app [反应16.5.2]

材料界面[3.2.2]
反应路由器域[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);

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

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

使用路由器实现Material-UI

2 个答案: