反应 - 带有Router的路由器不注入路由器

Posted 2023-02-21

【中文标题】反应 - 带有Router的路由器不注入路由器

【英文标题】：react - router withRouter does not inject router

【发布时间】：2016-09-10 13:42:07

【问题描述】：

我想在名为“App”的*** React 组件上使用 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>
              <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 Title 可点击。如果用户单击它，则应打开默认的“/”路径。这就是我尝试使用onTitleTouchTap=()=>this.props.router.push('/') 实现的目标。

我的问题是路由器不在那里。当用户点击Appbar中的标题时，会触发错误：Uncaught TypeError: Cannot read property 'push' of undefined。

withRouter(SomeComponent) 对我来说适用于组件树下方的组件。但在这种情况下我无法让它运行。

任何想法我做错了什么？

【参考方案1】：

这是因为您在渲染 react 应用程序后注入了路由器。

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 创建一个文件，就像您对其他组件所做的那样。

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。

【讨论】：

工作：你可以在这里看到它的实际效果：github.com/nemoo/democratizer/tree/master/app/assets/js