React Router implementation

Question

i'm new to ReactJS and i'm learning how to use react-router for routing, but the react-router documentation has only been a source to my frustration, so i have to go elsewhere to understand it.

This is my code:

ReactDOM.render((
        <ReactRouter>
            <ReactRouter.Route path="/" component={App}>
                <ReactRouter.Route path="create" component={CreateRecipe} />
                <ReactRouter.Route path=":id" component={ShowRecipe}>
                    <ReactRouter.Route path="edit" component={EditRecipe} />
                    <ReactRouter.Route path="delete" component={DeleteRecipe} />
                </ReactRouter.Route>
            </ReactRouter.Route>
        </ReactRouter>
    ), document.getElementById("app-container"));

But when loaded on the browser i get the following error in my browser's console.

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Please what could be the cause and how do i solve it?

Answer 1

Your Routes should be wrapped inside a Router, so <ReactRouter> should be <ReactRouter.Router>.

ReactDOM.render((
    <ReactRouter.Router>
        <ReactRouter.Route path="/" component={App}>
            <ReactRouter.Route path="create" component={CreateRecipe} />
            <ReactRouter.Route path=":id" component={ShowRecipe}>
                <ReactRouter.Route path="edit" component={EditRecipe} />
                <ReactRouter.Route path="delete" component={DeleteRecipe} />
            </ReactRouter.Route>
        </ReactRouter.Route>
    </ReactRouter.Router>
), document.getElementById("app-container"));

If you want to clean your code, you can replace all yours ReactRouter.Router by Router and ReactRouter.Route by Route, then adapt your code:

var Router = ReactRouter.Router;  
var Route = ReactRouter.Route;

I suggest you watch this video from Michael Jackson if you're struggling with the doc to grasp what you can do with react-router and a few examples.