react-router can i have nested-like path without nested router defined?

Question

Let's say i have two routes: /a/b, /a/b/d,

And i have a customized WrapperRoute, seems it always match to /a/b when i have /a/b/d typed as location. You can try with code-sandbox.

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

const routes = [
  {
    path: "/a/b",
    component: () => <div>Component A</div>
  },
  {
    path: "/a/b/d",
    component: () => <div>Component B</div>
  }
];

const App = () => (
  <Router>
    <div>
      <Link to="/a/b">/a/b</Link>
      <br />
      <Link to="/a/b/d">/a/b/d</Link>
      <Switch>
        {routes.map(route => {
          return (
            <WrapperRoute
              key={route.path}
              path={route.path}
              component={route.component}
            />
          );
        })}
      </Switch>
    </div>
  </Router>
);

render(<App />, document.getElementById("root"));

function WrapperRoute({ path, component: Page }) {
  return (
    <Route
      exact
      path={path}
      render={() => {
        return <Page />;
      }}
    />
  );
}

I am wondering why it happens, i have exact props defined