React Native使用Router时父组件在无关路由中意外渲染问题咨询

• Router组件默认会渲染其所有直接子节点，你没有将包裹在组件内，所以不管当前匹配什么路由，ParentComp都会被渲染。
• ParentComp内部的

  return (<Route exact path="/basic" component={BasicComp} />)
  

  只会在路径匹配/basic时渲染BasicComp，路径不匹配时props.children为null，所以访问非/basic路径时，你只会看到ParentComp里固定的

  return (<Text>Parent text</Text>)
  

  和空的children占位区域。
• 额外提示：你的代码里存在拼写错误，ParentComp的闭合标签写成了ParentCom，缺少末尾的p，运行时会触发报错。

方案1：给ParentComp包裹路径匹配的Route（推荐） #

给ParentComp外层套一个匹配/basic前缀的Route，确保只有路径匹配时ParentComp才会被渲染，修改后的Navigation组件代码如下：

export default function Navigation() {
  return (
    <Router forceRefresh={true}>
        <Route exact path="/" component={Main} />
        {/* 外层加Route控制ParentComp的渲染时机 */}
        <Route path="/basic">
          <ParentComp>
            <Route exact path="/basic" component={BasicComp} />
            {/* 后续如果有/basic下的子路由可以直接加在这里 */}
          </ParentComp>
        </Route>
        <Route exact path="/adv" component={AdvComp} />
        <Route exact path="/settings" component={SettingsComp} />
    </Router> 
 );
}

方案2：将ParentComp作为BasicComp的内部父组件 #

如果/basic路径下没有其他子路由，你可以直接把ParentComp放到BasicComp的代码里，不需要嵌套在路由配置中，路由配置直接简化为：

<Route exact path="/basic" component={BasicComp} />

然后在BasicComp的代码中引入ParentComp作为根布局即可。

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