I have a problem with my react components.
Basically my interface should be an SPA, built with ReactJS.

During the implementation of the authentication with [auth0-js](https://www.npmjs.com/package/auth0-js) I also implemented some routes.
The layout looks like this:

[![layout](https://i.stack.imgur.com/rX5et.jpg)](https://i.stack.imgur.com/rX5et.jpg)

Whenever I click now on the "Recipes" link, it should redirect to the route "/recipes".
However, when I implement the route with `<Route path="/recipes" component={Recipes} />` it only renders what is actually returned in the Recipes component. I know that this is correct from what react does.
Now, I want to keep the navigation bar but only want to exchange the component below, so I want to change what is below the navigation bar like I did in [App.js](https://github.com/thacomposers/thecookbook/blob/feature/login-reg-form/src/components/App.js).

How can I achieve this? Is something about the routes, or components not correct?
I do not want to re-render always everything. I also want to keep the style of the whole page. Is there a way to do this?

The whole code can be found [here](https://github.com/thacomposers/thecookbook/tree/feature/login-reg-form/).