react - 路由器withRouter不注入路由器-Java 学习之路

我想在我的顶级React组件'app'上使用withRouter .

文档在这里：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>
              


            {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 Headers 可点击 . 如果用户单击它，则应打开默认的"/"路径 . 这就是我试图用 onTitleTouchTap={()=>this.props.router.push('/')} 实现的目标 .

我的问题是路由器不存在 . 当用户单击Appbar中的 Headers 时，会触发错误： Uncaught TypeError: Cannot read property 'push' of undefined .

withRouter（SomeComponent）对我来说对组件树下面的组件很好 . 但在这种情况下，我无法让它运行 .

我做错了什么想法？

1 回答

这是因为你在渲染反应应用程序后注入路由器 .

const App = React.createClass({
  render() {
      return (
          <div>
              <AppBar
                title="Democratizer"
                onTitleTouchTap={()=>this.props.router.push('/')}
              >
              </AppBar>
              


            {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创建一个文件，就像您使用其他组件一样 .

const App = React.createClass({
  render() {
      return (
          <div>
              <AppBar
                title="Democratizer"
                onTitleTouchTap={()=>this.props.router.push('/')}
              >
              </AppBar>
              


            {this.props.children}
          </div>
      );
  }
});

module.exports = withRouter(App);

并将其导入index.js .

回复于 2024-05-13T08:54:15+08:00

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

1 回答

相关问题