connected-router error, a router may have only one

Question

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */}
      <div>
        <Switch>
          <Route exact={true} path="/enthusiasm" component={Hello} />
          <Route exact={true} path="/shipments" component={ShipmentsTable} />
          <Route exact={true} path="/shipments/:pickUpId" component={ShipmentInfoPage} />
        </Switch>
      </div>
    </ConnectedRouter>
  </Provider>
  ,
  document.getElementById('root') as HTMLElement
);

this is giving me an error saying, A <Router> may have only one child element, and it has only one element.

everything is according to the example in connected-router repo

and this was working fine with BrowserRouter, any help.

Version Info

• connected-react-router "4.4.1",
• react-router: "4.3.1",
• react: "16.4.2"

Answer 1

This is most either an error with one of the components you are rendering, or is an error with the package versions you are using. First, I would remove your node_modules folder, next, make sure to use all the dependency versions that this package.json file is using Next, run npm install or yarn add on your project.

If this does not work, please insert the components you are using into the origin post, especially ones that render links and routes.

Answer 2

i had this issue until i change spaces to tabs. Don't know why)