React Router v4/v5 的嵌套路由

嵌套路由可讓您在 React 應用程式中建立用於導航的分層結構。在 React Router v4 和 v5 中，您可以透過使用 和 元件來實現這一點。

範例

考慮以下範例，我們希望將應用程式劃分為前端和管理區域。

在上面的範例中，第一個 定義定義了前端路由，而第二個定義了管理路由。每個路由都與一個在存取該路由時應呈現的元件關聯。

注意事項

在 React Router v4 中，您不能嵌套 元件。相反，您將它們放置在另一個 中。例如：

應變為：

Topics 元件定義如下：

const Topics = ({ match }) => (
  

    
Topics
    
      Example topic
    
    
);

此結構可以更靈活地控制應用程式的路由。