使用反应路由器隐藏组件答案

【问题标题】：Hiding components with react router使用反应路由器隐藏组件
【发布时间】：2016-05-07 23:34:11
【问题描述】：

我刚刚开始使用 React.js，我有一个关于 React 路由器的问题。特别是我对在反应路由器中嵌套路由意味着什么感到有些困惑。假设我有以下代码（取自 react-router 的 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> 时会发生什么收件箱组件是否隐藏？当您转到路由器链接时，哪些视图会隐藏，哪些视图会保持可见？另外，您如何跟踪哪些组件是隐藏的，哪些不是？

谢谢！

【问题讨论】：

标签： javascript reactjs react-router jsx

【解决方案1】：

inbox 组件是父组件

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

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

所以你总是会从任何inbox 路由看到MessageList。这有帮助吗？

【讨论】：

你的意思是如果我在/inbox/messages/1，我会一直看到inbox？
正确。 Message 作为名为 children 的属性传递给 Inbox。你想做什么？
我试图开始使用 React！我很难设置服务器和依赖项，所以我在这里问！
这就是我们在这里的目的。如果您还有其他问题，请告诉我。希望这有帮助

【解决方案2】：

除非你使用<Switch>（你可以像<Div>一样包裹你的<Route>s来使用它），react-router 将显示嵌套组件包含。换句话说，在您的示例中，消息将显示在收件箱的内，两者同时显示。

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

【讨论】：