本文介绍了反应 - 路由器 withRouter 不注入路由器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在名为App"的顶级 React 组件上使用 withRouter.
文档在这里:https://github.com/reactjs/react-router/blob/v2.4.0/upgrade-guides/v2.4.0.md#withrouter-hoc-higher-order-component
我是这样使用的:
从react"导入React;从react-dom"导入{渲染};从反应路由器"导入 {Router, Link, hashHistory, Route, IndexRoute, withRouter};从./voteview/Voteview.jsx"导入投票视图;从./overview/Overview.jsx"导入OverView;从 'material-ui/AppBar' 导入 AppBar;从'material-ui/styles/getMuiTheme'导入getMuiTheme;从'material-ui/styles/MuiThemeProvider'导入MuiThemeProvider;从react-tap-event-plugin"导入injectTapEventPlugin;//需要onTouchTap//当反应1.0发布时可以消失//检查这个回购://https://github.com/zilverline/react-tap-event-plugin注入TapEventPlugin();const App = React.createClass({使成为() {返回 (<div><应用栏标题=民主主义者"onTitleTouchTap={()=>this.props.router.push('/')}></AppBar><br/>{this.props.children}
);}});使成为((<MuiThemeProvider muiTheme={getMuiTheme()}><路由器历史={hashHistory}><Route path="/" component={App}><Route path="voteview/:baselineId" component={VoteView}/><IndexRoute 组件={OverView}/></路线></路由器></MuiThemeProvider>), document.getElementById('app'));module.exports = withRouter(App);
我想使用 withRouter(App) 以使 Appbar 标题可点击.如果用户单击它,则应打开默认的/"路径.这就是我尝试使用 onTitleTouchTap={()=>this.props.router.push('/')}
实现的目标.
我的问题是路由器不存在.当用户点击Appbar中的标题时,会触发一个错误:Uncaught TypeError: Cannot read property 'push' of undefined
.
withRouter(SomeComponent) 对我来说适用于组件树更下方的组件.但在这种情况下我无法让它运行.
知道我做错了什么吗?
解决方案
发生这种情况是因为您在渲染 React 应用程序后注入了路由器.
const App = React.createClass({使成为() {返回 (<div><应用栏标题=民主主义者"onTitleTouchTap={()=>this.props.router.push('/')}></AppBar><br/>{this.props.children}
);}});App = withRouter(App);使成为((<MuiThemeProvider muiTheme={getMuiTheme()}><路由器历史={hashHistory}><Route path="/" component={App}><Route path="voteview/:baselineId" component={VoteView}/><IndexRoute 组件={OverView}/></路线></路由器></MuiThemeProvider>), document.getElementById('app'));
更好的解决方案是为 App 创建一个文件,就像您对其他组件所做的一样.
const App = React.createClass({使成为() {返回 (<div><应用栏标题=民主主义者"onTitleTouchTap={()=>this.props.router.push('/')}></AppBar><br/>{this.props.children}
);}});module.exports = withRouter(App);
并将其导入您的 index.js.
I want to use withRouter on my top-level React component called 'App'.
Documentation is here: https://github.com/reactjs/react-router/blob/v2.4.0/upgrade-guides/v2.4.0.md#withrouter-hoc-higher-order-component
I use it like this:
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);
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('/')}
.
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) 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'));
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);
and import it in your index.js.
这篇关于反应 - 路由器 withRouter 不注入路由器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!