Invariant failed: You should not use outside a

Question

I use react-router-dom for routing in my React application. Part of my app extracted in another package. List of dependencies looks like this:

Answer 1

I had a similar problem when trying to replace Rails views in a Solidus app.

The solution for me was to edit the vies to use the React Router that I had just added, but apparently hadn't fully configured.

For example, I edited views/spree/home/index.html from:

<%= javascript_pack_tag 'application' %>
<%= react_component("Home/Index") %>

to:

<%= javascript_pack_tag 'application' %>
<%= react_component("Routes") %>

For more reference, here is my javascript/components/Route.js:

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home/Index";
import Product from "./Products/Show";

class Routes extends React.Component {
  render() {
    return (
      
        
        
      
    );
  };
};

export default Routes;