如何解决React Router嵌套路由下子路径无法匹配渲染的问题？

• 子路由使用绝对路径匹配：ContentPage内部的Route路径/first为绝对路径，只会匹配站点根路径下的/first，不会自动拼接父路由/contents前缀，因此/contents/first无法触发该路由匹配。
• 父级路由配置问题：父级Route如果添加了exact属性，仅完全匹配/contents时才会渲染ContentPage组件，/contents/first路径下父路由匹配失败，子组件不会加载，自然无法渲染子路由对应的内容。另外你提供的父路由代码存在语法错误，第一个Route的闭合标签误写为<Route>而非</Route>，也可能导致路由匹配逻辑异常。
• 跳转链接路径错误：如果跳转时使用了绝对路径/first，会直接跳转到根路径下的/first，而非你预期的/contents/first。

1. 修正父路由配置，移除exact属性并修复语法错误：

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

2. 子路由使用父路由匹配前缀拼接路径，通过useRouteMatch hook获取父路由路径：

import { useRouteMatch, Switch, Route } from 'react-router-dom'

export default function ContentPage(){
  const match = useRouteMatch()
  // 省略其他业务逻辑
  return (
     <Switch>
        <Route path={`${match.url}/first`}>
             <FirstContentPage/>
        </Route>
        <Route>
            <DefaultContentPage/>
        </Route>
     </Switch>
  )
}

3. 调整跳转链接为相对路径或拼接父路由前缀：

// 写法1：相对路径，自动拼接当前路由前缀
<Link to="first">跳转到First页面</Link>

// 写法2：拼接match.url，兼容性更好
<Link to={`${match.url}/first`}>跳转到First页面</Link>

内容的提问来源于stack exchange，提问作者ololo