如何在不路由到组件的情况下使 this.props.history 可用答案

【问题标题】：How to make this.props.history available without being router to a component如何在不路由到组件的情况下使 this.props.history 可用
【发布时间】：2019-04-14 12:37:31
【问题描述】：

在我的 App.js 中，我试图从“react-router-dom”中获取 this.props.history。

相关代码是 App.js 是：

import {BrowserRouter, Route, Switch, withRouter} from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
            <Route path="/login" exact component={Login}/>
            <Route path="/" component={MainApp}/> 
        </Switch>
     </BrowserRouter>
    );
  }
}
    const appWithAuth = withRouter(App);

    export default <BrowserRouter><appWithAuth/></BrowserRouter>;

然后我得到错误：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。

而错误指向index.js：

> 22 | ReactDOM.render(
  23 | <Provider store={store}><App/></Provider>
  24 |  , document.getElementById('root'));
  25 | registerServiceWorker();

我研究了这个错误，但它似乎非常针对个别问题。我确实尝试运行 npm install react-router-redux@next，但没有帮助。

提前致谢！

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

这是无效的：

export default <BrowserRouter><appWithAuth/></BrowserRouter>;

应该是

export default withRouter(App);

但是，如果您尝试进行身份验证，请阅读this。

【讨论】：

嘿，马特，我确实尝试过使用路由器（应用程序）导出默认值。它会引发以下错误：您不应在之外使用或 withRouter()。它再次指向 index.js：> 22 | ReactDOM.render( 23 | 24 | , document.getElementById('root')); 25 | registerServiceWorker();
嘿，马特，我让它工作了，我应该将包装在 index.js 中以使其工作。感谢您的帮助！

【解决方案2】：

对于遇到相同问题的任何人：您需要用 BrowserRouter 包装 reactDOM.render 以使其工作：

ReactDOM.render(
    <BrowserRouter>
<Provider store={store}><App/></Provider></BrowserRouter>
 , document.getElementById('root'));
registerServiceWorker();

感谢马特的澄清

【讨论】：