How come my route isn't matching with React Router 4? - react-router-v4

Question

I have a routes file that works as expected:
<Route path="/app" render={({match}) => (
<Switch>
<Route exact path={`${match.url}/`} component={Home} />
<Route path={`${match.url}/error`} component={Error} />
</Switch>
</Route>
But when I try to hard code the routes, it does not work. For example:
<Route path="/app" render={({match}) => (
<Switch>
<Route exact path={`app/`} component={Home} />
<Route path={`app/error`} component={Error} />
</Switch>
</Route>
Of course hard coding is not what I really want, but in case I wanted to do something like this
<Route path="/app">
<Switch>
<Route exact path="app/" component={Home} />
<Route path="app/error" component={Error} />
</Switch>
</Route>
And create the app using the Children of the Route and not the render prop. What am I doing wrong, or how can I accomplish this?

Answer 1

React router V4 doesn't use nested routes.
<Route path="/app"> will match anything that begins with /app, which I don't think is what you want.
This should be enough to do what you want:
<Switch>
<Route exact path={`/app/error`} component={Error} />
<Route path={`/app`} component={Home} />
</Switch>