react - 路由器與路由器不注入路由器

Question

我想在我的頂級React組件上使用路由器，名爲'App'。

文檔是在這裏：https://github.com/reactjs/react-router/blob/v2.4.0/upgrade-guides/v2.4.0.md#withrouter-hoc-higher-order-component

我用這樣的：

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

我想爲了讓Appbar標題點擊使用withRouter（應用程序）。如果用戶點擊它，應該打開默認的「/」路徑。這是我試圖用onTitleTouchTap={()=>this.props.router.push('/')}實現的。

我的問題是路由器不在那裏。當用戶點擊Appbar中的標題時，會觸發一個錯誤：Uncaught TypeError: Cannot read property 'push' of undefined。

withRouter（SomeComponent）正常工作對我來說分量進一步下跌的組件樹。但我無法在這種情況下運行。

任何想法我做錯了什麼？

Answer 1

發生這種情況是因爲您在呈現反應應用程序後注入路由器。

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

更好的解決方案是創建一個應用程序文件，就像你對其他組件做了一樣。

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中。