隱藏組件與反應路由器

我剛剛開始與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

隱藏組件與反應路由器

回答

相關問題