react-router我可以在没有嵌套路由器定义的情况下使用类似嵌套的路径吗？

Question

我们说我有两条路线：/a/b，/a/b/d，

我有一个自定义的WrapperRoute，当我输入/a/b作为位置时，它似乎总是与/a/b/d匹配。您可以尝试使用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 />;
      }}
    />
  );
}

我想知道为什么会发生这种情况，我定义了exact道具