Question

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

谢谢！

Answer 1

inbox组件是父组件

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

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

因此，您始终会看到来自任何MessageList路线的inbox。这有帮助吗？

Answer 2

除非您正在使用<Switch>（您可以通过将<Route>包裹在<Div>之内来使用，否则react-router将显示嵌套组件。换句话说，在您的示例中，消息将在收件箱中显示，同时显示两者。

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

用反应路由器隐藏组件

2 个答案: