如何在嵌套路径中使用React Router Resolve

Question

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

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

切换到home .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

您需要从matchprop访问当前的path。由于ContentPage不接收路由道具，你可能需要将ContentPage包装在withRouter高阶组件中。

与

match对象包含<Route path>如何匹配的信息URL。匹配对象包含以下属性:

• params - (object)从URL解析的键/值对，对应于路径
的动态段
• isExact -(布尔值)如果匹配整个URL(没有尾随字符)为true
• path - (string)用于匹配的路径模式。用于构建嵌套的<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);