Error: <Route> elements are for router configuration only and should not be rendered in react-router v4

All we need is an easy explanation of the problem, so here it is.

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 './components/header';


import './index.scss';


class App extends React.Component {

  render() {
    return (
      <Router  history={HashRouter}>
        <div>
          <Route path={"/"} component={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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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 './components/header';


import './index.scss';

class App extends React.Component {

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

Method 2

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" component={ComponentOne} />
            <Route path="/path/two" component={ComponentTwo} />
            <Route path="/" component={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 !

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply