如何使 React Router 在嵌套路径中解析

Question

我有点不确定这里可能出了什么问题。

我有一个 React 路由器开关，它嵌套在另一个 React 路由器开关中，如下所示

homepage.js文件的切换如下

<Switch>
       <Route path={HomePageRoutes.CONTENTS}> //which is just /contents
         <ContentPage initialData={fetchedData}/>
       <Route>
       <Route path={HomePageRoutes.ADS}>
         <AdsPage/>
       </Route>
</Switch>
         

现在，上面引用的 ContentPage 位于一个名为 contentpage.js 的文件中，该页面还包含一个开关，如下所示：

export default function ContentPage(){
 ......
     <Switch>
        <Route path={`/first`}>
             <FirstContentPage/>
        </Route>
        <Route>
            <DefaultContentPage/>
        </Route>
     </Switch>
 ......
}                       

我期待如果浏览器中的当前位置是 /content 并且我单击重定向到 /first 的链接，/first 将附加到当前位置成为 /content/first 和FirstContentPage 组件应该渲染，但不幸的是它没有渲染？

我做错了什么？

感谢您的期待。

Answer 1

您需要从 match 属性访问当前的 path。由于ContentPage 没有接收到route props，您可能需要将ContentPage 包装在withRouter 高阶组件中。

match

匹配对象包含有关 <Route path> 如何匹配的信息 网址。匹配对象包含以下属性：

• params - (object) 从对应于路径动态段的 URL 解析的键/值对
• isExact -（布尔值）如果整个 URL 都匹配（无尾随字符）则为真
• path -（字符串）用于匹配的路径模式。用于构建嵌套的<Route>s
• url - (string) URL 的匹配部分。用于构建嵌套的<Link>s

function ContentPage({ match }) {
  const { path } = match;

  ......
    <Switch>
      <Route path={`${path}/first`}>
        <FirstContentPage/>
      </Route>
      <Route>
        <DefaultContentPage/>
      </Route>
    </Switch>
  ......
}

export default withRouter(ContentPage);