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

问题描述

我正在尝试使用 Material-UI 库构建简单的 React 应用程序.
我使用了 示例应用程序来创建反应-app 并尝试向其中添加路由器，以便我可以在组件之间导航，但似乎 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?

推荐答案

我有一个基本的boilerplate project 示例，你可以克隆，我试一试.

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

该项目正在使用:
- 创建反应应用
- 反应路由器 3.0.2
- 材料界面 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 >
        )
    }
}

Rotes 示例:

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屋！