Question

在我的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，但这没有帮助。

谢谢！

Answer 1

这是无效的：

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

应该是

export default withRouter(App);

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

Answer 2

对于遇到相同问题的任何人：您需要将reactDOM.render与BrowserRouter包装在一起，以使其起作用：

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

感谢马特的澄清

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

2 个答案: