react - 路由器withRouter不注入路由器 [英] react - router withRouter does not inject router

问题描述

我想在名为'App'的顶级React组件上使用withRouter。

I want to use withRouter on my top-level React component called '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);

我想要使用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不注入路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！