Ich möchte mitRouter auf meiner Top-Level-React-Komponente namens "App" verwenden.reagieren - Router mitRouter nicht Router injizieren
Dokumentation ist hier: https://github.com/reactjs/react-router/blob/v2.4.0/upgrade-guides/v2.4.0.md#withrouter-hoc-higher-order-component
ich es wie folgt verwendet werden:
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 withRouter (App) zu machen, um AppBar Titel klickbare verwenden möchten. Wenn der Benutzer darauf klickt, sollte der Standardpfad "/" geöffnet werden. Das versuche ich mit onTitleTouchTap={()=>this.props.router.push('/')}
zu erreichen.
Mein Problem ist, dass der Router nicht da ist. Wenn der Benutzer auf den Titel in der Appleiste klickt, wird ein Fehler ausgelöst: Uncaught TypeError: Cannot read property 'push' of undefined
.
withRouter (SomeComponent) funktioniert gut für mich Komponenten weiter unten im Komponentenbaum. Aber ich kann es in diesem Fall nicht ausführen.
Irgendwelche Ideen, was ich falsch gemacht habe?
funktioniert: Sie können es hier in Aktion sehen: https://github.com/nemoo/democratizer/tree/master/app/assets/js – nemoo