使用 React Router 隐藏组件

Question

我刚刚开始使用 React.js，我有一个关于 React 路由器的问题。特别是我对在 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>

然后当我转到 link /inbox/messages/<id> 收件箱组件是否被隐藏时会发生什么？当您转到路由器 link 时，哪些视图会隐藏，哪些视图会留在视线范围内？另外，您如何跟踪哪些组件是隐藏的，哪些不是？

谢谢！

Answer 1

inbox组件是父组件

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

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

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

Answer 2

除非你正在使用 <Switch>（你可以像 <Div> 一样通过环绕你的 <Route> 来使用），react-router 将显示嵌套组件包括。换句话说，在您的示例中，邮件将显示在收件箱内，两者同时显示。

另一方面，

<Switch> 只会显示第一个匹配的 <Route>，因此在您的示例中只会显示收件箱。这是您不想让 "hiding" 元素可见的一种方式。

使用 React Router 隐藏组件

Hiding components with react router

javascript

jsx

reactjs

react-router