使用react路由器隐藏组件

Hiding components with react router

本文关键字：组件 隐藏 路由器 react 使用      更新时间：2023-09-26

我刚开始使用React.js，我有一个关于React路由器的问题。特别是，我有点困惑在react路由器中嵌套路由意味着什么。假设我有以下代码（取自react路由器的github页面）

<Router>
  <Route path="/" component={App}>
    {/* Show the dashboard at / */}
    <IndexRoute component={Dashboard} />
    <Route path="about" component={About} />
    <Route path="inbox" component={Inbox}>
      <Route path="messages/:id" component={Message} />
    </Route>
  </Route>
</Router>

那么，当我转到链接/inbox/messages/<id>时，收件箱组件会被隐藏吗？当你访问路由器链接时，哪些视图会隐藏，哪些视图仍在视线中？此外，如何跟踪哪些组件是隐藏的，哪些不是？

谢谢！

inbox组件是父组件

const Inbox = ({ children }) => (
  <div>
    <MessageList />
    { children }
  </div>
)
const Message = ({ content }) => (
  <div>
    { content }
  </div>
)

因此，您总是会从任何inbox路由中看到MessageList。这有帮助吗？

除非使用<Switch>（可以像使用<Div>一样将<Route>包裹起来使用），否则react路由器将显示嵌套组件。换句话说，在您的示例中，邮件将显示在收件箱内，同时显示两者。

另一方面，<Switch>将使其仅显示第一个匹配的<Route>，因此在您的示例中仅显示收件箱。这是一种"隐藏"你不想被看到的元素的方法。

相关文章：