反应子嵌套路由

Question

我正在尝试在 Reactjs 中实现子/嵌套路由，以下是我发现的 2 种嵌套子路由的方法，但父路由可以正常工作，而父组件的子路由则不能。

以下是它的工作原理：

/ => Home Component
/login => Login Component
/register => Register Componet

/product/ => ProductListing Component 
/product/2 => ProductDetails Component [Expected but does not work]
/product/2/edit => ProductEdit Component [Expected but does not work]

---

方法一

以下是我的主要路线文件：

export default function MainRouter() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/register" component={Register} />
      <Route exact path="/product" component={ProductRouter} />
    </Router>
  );
}

ProductRouter.js 文件中的子路由如下所示

export default function ProductRouter(props) {
  console.log(props);

  return (
    <Switch>
      <Route
        exact
        path={`${props.match.path}/:productId`}
        component={ProductDetails}
      />
      <Route
        exact
        path={`${props.match.path}/:productId/edit`}
        component={ProductEdit}
      />
      <Route exact path={`${props.match.path}`} component={ProductListing} />
    </Switch>
  );
}

---

方法二

以下是我的主要路线文件：

export default function MainRouter() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/register" component={Register} />
      <Route exact path="/product/*" component={ProductRouter} />
    </Router>
  );
}

ProductRouter.js 文件中的子路由如下所示

export default function ProductRouter(props) {
  return (
    <Fragment>
      <Route exact path="/" component={ProductListing} />
      <Route
        exact
        path=":productId"
        component={ProductDetails}
      />
      <Route
        exact
        path=":productId/edit"
        component={ProductEdit}
      />
    </Fragment>
  );
}

以下是我检查的链接：

• Stackoverflow: Nested routes with react router v4 / v5
• https://reacttraining.com/blog/react-router-v6-pre/#introducing-routes

Answer 1

根路由上的exact 属性将排除任何子路由，它们不会渲染，因为根路由不再匹配。

Nesting Routes

您需要从根路由中删除 exact 属性（将其保留在主路由上，这样它就不会始终匹配）

export default function MainRouter() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
      <Route path="/product" component={ProductRouter} />
    </Router>
  );
}

使用正确的路径前缀（您可以删除确切的道具，Switch 只会呈现第一个匹配项

export default function ProductRouter(props) {
  console.log(props);
  const { match: { path } } = props;

  return (
    <Switch>
      // specify more specific path before less specific path
      <Route path={`${path}/:productId/edit`} component={ProductEdit} />
      <Route path={`${path}/:productId`} component={ProductDetails} />
      <Route path={path} component={ProductListing} />
    </Switch>
  );
}