Tried to upgrade react-router from 2 to 4 and broke it and now cant render my app.

getting various errors (the most recent is: <Route> elements are for router configuration only and should not be rendered)

I have also had the error where my ./ route renders fine but every other route blows up when I refresh and says Cannot GET /randomRoute

I am creating a react app and my main index.js file (where I include ReactDOM.render) also includes the routes and looks like so:

import React from 'react';
import ReactDOM from 'react-dom';
import { Route } from 'react-router';
import { BrowserRouter as Router, Match, HashRouter } from 'react-router-dom'
import Header from './ponents/header';


import './index.scss';


class App extends React.Component {

  render() {
    return (
      <Router  history={HashRouter}>
        <div>
          <Route path={"/"} ponent={Header} />
        </div>
      </Router>
    );
  }
}

ReactDOM.render(<App />,
    document.getElementById('content'));

why would I be getting that current error and can anyone give me a simple start to the basics I need to include just to get routing working? it worked in version 2 but I wanted to upgrade and now cant get it working again

Tried to upgrade react-router from 2 to 4 and broke it and now cant render my app.

getting various errors (the most recent is: <Route> elements are for router configuration only and should not be rendered)

I have also had the error where my ./ route renders fine but every other route blows up when I refresh and says Cannot GET /randomRoute

I am creating a react app and my main index.js file (where I include ReactDOM.render) also includes the routes and looks like so:

import React from 'react';
import ReactDOM from 'react-dom';
import { Route } from 'react-router';
import { BrowserRouter as Router, Match, HashRouter } from 'react-router-dom'
import Header from './ponents/header';


import './index.scss';


class App extends React.Component {

  render() {
    return (
      <Router  history={HashRouter}>
        <div>
          <Route path={"/"} ponent={Header} />
        </div>
      </Router>
    );
  }
}

ReactDOM.render(<App />,
    document.getElementById('content'));

why would I be getting that current error and can anyone give me a simple start to the basics I need to include just to get routing working? it worked in version 2 but I wanted to upgrade and now cant get it working again

• javascript
• reactjs
• react-router

2 Answers 2

The problem is that you are specifying history object as a Router type.

From the Documentation

A <Router> that uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL.

This is similar to what you would do when you specify history as hashHistory in Router v2.

Also, history object has been seprated into a seprate package from v4 onwards.

You can either make use of BrowserRouter or HashRouter to render your Routes.

Change your Route Configuration to below if you want to use BrowserRouter which is <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.This is similar to what you would do when you specify history as browserHistory in Router v2.

Also you need to import Route from 'react-router-dom'.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Match, Route} from 'react-router-dom'
import Header from './ponents/header';


import './index.scss';

class App extends React.Component {

  render() {
    return (
      <Router >
        <div>
          <Route path={"/"} ponent={Header} />
        </div>
      </Router>
    );
  }
}

Well, in react router v4 the API is different. You have to define it in your index.js file like this,

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Switch>
            <Route path="/path/one" ponent={ComponentOne} />
            <Route path="/path/two" ponent={ComponentTwo} />
            <Route path="/" ponent={IndexComponent} />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

Make sure the order is important here. Put the most generic one at last. Hope this helps. Happy coding !