用路由器反应Material-UI [英] React Material-UI with Router

问题描述

我正在尝试使用Material-UI库构建简单的React应用.
我已经使用示例应用创建了- react-app 并尝试向其添加Router，以便我可以在组件之间导航，但是似乎Material-UI库添加的组件无法与React-Router库配合使用.

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.

有没有同时使用react-router和material-ui库的示例?

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

推荐答案

我有一个基本的 strong>样板项​​目 示例，您可以克隆并尝试一下.

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

该项目正在使用:
-create-react-app
-react-router 3.0.2
-material-ui 0.19.4

The project is using :
- 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>
)

这篇关于用路由器反应Material-UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！