问题描述
我想在名为'App'的顶级React组件上使用withRouter。
I want to use withRouter on my top-level React component called 'App'.
文档在这里:
我用它是这样的:
import React from "react";
import { render } from "react-dom";
import {Router, Link, hashHistory, Route, IndexRoute, withRouter} from "react-router";
import VoteView from "./voteview/Voteview.jsx";
import OverView from "./overview/Overview.jsx";
import AppBar from 'material-ui/AppBar';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();
const App = React.createClass({
render() {
return (
<div>
<AppBar
title="Democratizer"
onTitleTouchTap={()=>this.props.router.push('/')}
>
</AppBar>
<br/>
{this.props.children}
</div>
);
}
});
render((
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="voteview/:baselineId" component={VoteView}/>
<IndexRoute component={OverView}/>
</Route>
</Router>
</MuiThemeProvider>
), document.getElementById('app'));
module.exports = withRouter(App);
我想要使用withRouter(App)以使Appbar标题可单击。如果用户单击它,则应打开默认的/路径。这就是我尝试用 onTitleTouchTap = {()=> this.props.router.push('/')}
实现的目标。
I want to use withRouter(App) in order to make Appbar Title clickable. If the user clicks it, the default "/" path should be opened. That is what I try to achieve with onTitleTouchTap={()=>this.props.router.push('/')}
.
我的问题是路由器不存在。当用户点击Appbar中的标题时,它会触发错误: Uncaught TypeError:无法读取未定义的属性'push'
。
My problem is that the router is not there. When the user clicks on the title in the Appbar, it triggers an error: Uncaught TypeError: Cannot read property 'push' of undefined
.
withRouter(SomeComponent)对我来说对组件树下面的组件很好。但在这种情况下,我不能让它运行。
withRouter(SomeComponent) works fine for me for components further down the component tree. But I cannot get it to run in this case.
任何想法我做错了什么?
Any ideas what I did wrong?
推荐答案
这种情况正在发生,因为你在渲染反应应用程序后注入了路由器。
That is happening because you are injecting the router after you render the react app.
const App = React.createClass({
render() {
return (
<div>
<AppBar
title="Democratizer"
onTitleTouchTap={()=>this.props.router.push('/')}
>
</AppBar>
<br/>
{this.props.children}
</div>
);
}
});
App = withRouter(App);
render((
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="voteview/:baselineId" component={VoteView}/>
<IndexRoute component={OverView}/>
</Route>
</Router>
</MuiThemeProvider>
), document.getElementById('app'));
更好的解决方案是为App创建一个文件,就像使用其他组件一样。
A better solution would be creating a file for App like you have done with the other components.
const App = React.createClass({
render() {
return (
<div>
<AppBar
title="Democratizer"
onTitleTouchTap={()=>this.props.router.push('/')}
>
</AppBar>
<br/>
{this.props.children}
</div>
);
}
});
module.exports = withRouter(App);
并将其导入index.js。
and import it in your index.js.
这篇关于react - 路由器withRouter不注入路由器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!