Javascript 嵌套反应路由器：在显示嵌套子组件时隐藏父组件

作为reactJS的初学者，我想知道在路由到子组件URL时如何隐藏父组件

假设一个场景：

用户位于“/house”，如下所示：

当用户单击房屋网格时，他将导航到“/house/flat/：flatID”。内部构件

<Route
    path={`${this.props.match.url}/flat/:flatId`}
    render={() => <div>Each Flat details</div>}
/>

每个平面细节}
/>

然后子组件和父组件都可见，如下所示：

所以我想在用户导航到“/house/flat:FlatId”时只显示平面组件。请向我推荐任何有帮助的东西！任何文章的链接，以便我可以学习和实现这样的功能

代码：

App.js

豪斯酒店

ongrogridclick=id=>{
;
};
返回(
Ghar各}
/>
);

解决方案是将

“/house/flat/：flatId”

提升到与

“/house”

相同的级别

每个单位的详细信息}/>

您可以通过不同的方式实现

在父组件中定义路由，我认为这是最好的选择

注意：不要使用

exact

，而是根据优先级对路线进行排序，这样，如果输入的路线有任何拼写错误，将使路线重定向到下一个匹配的路线

可以将房屋作为单独的管线构件，并将管线嵌套在该构件内

//路由
//房屋构件
阶级之家。组成部分{
render（）{
返回(
每个平面详图}/>}/>
)
}
}

您可以检查路线是否具有

flatId

并隐藏元素，在房屋组件中，您可以检查

this.props.match.params.flatId

，如果设置了

flatId

，则可以隐藏该房屋组件

//房屋组件
阶级之家。组成部分{
render（）{
返回(
{
！this.props.match.params.flatId？
房屋组成部分：
无效的
} 
每个单位的详细信息}/>
)
}
}

您想正确切换路线吗？或者，请分享您的路线代码当用户单击他导航到的任何网格/house/flat/flatID时，我想在这个url中显示的只是平面细节，而不是房屋和平面细节。但我也想将道具从房屋组件传递到平面组件，谢谢！非常接近解决方案您必须在公共祖先中存储和检索数据。更多信息请参见@efrainsanjayadhikary他们都在app.js内！在app.js中加载所有内容并共享到公寓和房子中不是太重了吗？不，开销可以忽略不计。如果希望以更纯粹的方式管理

状态

，也可以在

“/house”

中嵌套

“/”

和

“/flat/：flatId”

子例程。基本步骤/逻辑都是一样的@EfrainSanjayAdhikaryok我明白了你想要表达的意思！但是当房屋组件渲染时，我获取所有数据，当用户单击任何网格（房屋）时，该房屋的数据必须传递到平面组件中，您了解我的场景吗？因此我无法从父组件获取数据！我要把道具从房子里送到公寓你可以用第二种选择，这是最好的选择吗？难道没有任何解决方案可以只路由到子组件而不是同时路由到父组件和子组件吗？尝试新的第二个选项会更好，也是最佳实践，我以前忘记添加了

<Route
    path={`${this.props.match.url}/flat/:flatId`}
    render={() => <div>Each Flat details</div>}
/>

<Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/account" component={Account} />
    <Route path="/gharjagga" component={GharJagga} />
</Switch>

onGharGridClick= id => {
    <Redirect to={`${this.props.match.url}/flat/${id}`} />;
};

return (
    <Route
        path={`${this.props.match.url}/flat/:fkatId`}
        render={() => <div>Ghar Each</div>}
    />
);

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/account" component={Account} />
  <Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>}/>
  <Route path="/house" component={House} />
</Switch>