0

I'm using the react-rails gem (v 2.3) with react-router-dom (v 4.2.2) and mounting my root component App on my root Rails route.

This is how it's being mounted: 

<%= react_component("App") %>

And this is the component itself:

const Router     = ReactRouterDOM.BrowserRouter,
  Route      = ReactRouterDOM.Route;

class App extends React.Component{
  render() {
    return (
      <Router>
        <Route path="/" component={Index}>
        </Route>
      </Router>
    );
  }
}

I keep getting the following error:

Uncaught Error: You should not use <Route> or withRouter() outside a <Router>

Am I not using the Route component within a Router component above? Is there an error perhaps with the Index component?

Thanks in advance for any help :)

RoyK
  • 11
  • 1
  • 2

2 Answers2

2

Maybe it's not correct error .. Try override your App like that

class App extends React.Component{
  render() {
    return (
      <Router>
        <Route path="/" component={Index} />
      </Router>
    );
  }
}

Or wrapp you Route in div

class App extends React.Component{
  render() {
     return (
       <Router>
         <div>
            <Route path="/" component={Index} />
         </div>
       </Router>
    );
  }
}

Here is docs

Nikolay Podolnyy
  • 931
  • 10
  • 19
0

I ran into a similar error message, but in a different context. I'm posting my fix here just in case someone else encounters the same situation I did.

My issue was that I'd had an App.js with two elements added, but I had forgotten to update my index.js file. It had previously been:

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

which I updated to:

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'))

which also had to add the following import statement:

import { BrowserRouter } from 'react-router-dom'
citizenmilton
  • 1