Problem with react Route (rendering a blank page

I am trying to render Register Component using Route, but instead it renders a blank page (the div tag with id=”root” is emty

this is what i did:
-This is the Register component File containing Register component

-This is the App component without using react Route
App component without React Route

-This is what it looks like in the browser:
component on the after being rendered

but then after using react Route in the App component:
App component using React route

it became like this in the web page:
The Register and the Header and the Footer components are gone