How to make this.props.history available without being router to a component

Question

In my App.js, I'm trying to make available the this.props.history from the 'react-router-dom'.

Relavant code is App.js is:

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>;

Then I get the error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

And the error points to index.js:

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

I researched this error but it seems very specific to individual problems. I did try to run npm install react-router-redux@next, but it didn't help.

Thanks in advance!

score 0 · Accepted Answer · answered Nov 11 '18 at 17:20

0

This is invalid:

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

It should be

export default withRouter(App);

However, if you're trying to do authentication, please read this.

answered Nov 11 '18 at 17:20

Matt Carlotta

18,972
4
39
51

Hey Matt, I did try with export default withRouter(App). It throws the following error: You should not use or withRouter() outside a . And it points to index.js again: > 22 | ReactDOM.render( 23 | 24 | , document.getElementById('root')); 25 | registerServiceWorker(); – sir-haver Nov 11 '18 at 17:38
Hey Matt I got it working, I should wrap the inside index.js for it to work. Thanks for your help! – sir-haver Nov 11 '18 at 17:44

score 0 · Answer 2 · answered Nov 11 '18 at 17:45

for anybody who had the same issue: You need to wrap the reactDOM.render with BrowserRouter for it to work:

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

Thanks to Matt for the clarification

How to make this.props.history available without being router to a component

2 Answers2