2016-05-14 24 views
3

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?

Antwort

4

Das passiert, weil Sie den Router injizieren, nachdem Sie die Reaktions-App gerendert haben.

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')); 

Eine bessere Lösung wäre das Erstellen einer Datei für App, wie Sie es mit den anderen Komponenten getan haben.

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); 

und importieren Sie es in Ihre index.js.

+1

funktioniert: Sie können es hier in Aktion sehen: https://github.com/nemoo/democratizer/tree/master/app/assets/js – nemoo