隐藏组件与反应路由器

我刚刚开始与React.js和我有一个关于反应路由器的问题。特别是对于在反应路由器中嵌套路由意味着什么，我有点困惑。假设我有以下代码（从反应路由器的GitHub的页面获取），当我去链接/inbox/messages/<id>不收件箱组件获得隐藏隐藏组件与反应路由器

<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>

那么会发生什么？当你进入路由器链接时哪些视图隐藏，哪些视图保持在视线之内？还有，你如何跟踪哪些组件被隐藏，哪些不是？

谢谢！

来源

2016-05-07 Curious

的inbox组件是父组件

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

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

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

来源

2016-05-08 03:23:13 aray12

你的意思是说，如果我在'/ inbox/messages/1'中，我总是会看到'inbox'？ – Curious

正确。 'Message'作为一个名为'children'的属性传递给'Inbox'。你想做什么？ – aray12

我正尝试着手使用React！我很难设置服务器和依赖项，所以我在这里问了！ – Curious

除非你使用<Switch>（您可以通过在你的<Route>就像一个<Div>包装使用），反应路由器将显示嵌套组件包括性。换句话说，在您的示例中，邮件将在收件箱内显示，两者都在同一时间显示。

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

来源

2017-05-31 21:31:12 yoursweater

隐藏组件与反应路由器

回答

相关问题