Material-UI 选项卡未在页面渲染上显示组件报告

Posted 2023-02-21

【中文标题】Material-UI 选项卡未在页面渲染上显示组件报告

【英文标题】：Material-UI tab not displaying component report on page render

【发布时间】：2021-10-03 20:20:24

【问题描述】：

我使用 react-router 设置了以下 material-ui 选项卡，但是当此页面呈现时，它会显示选项卡名称：Tab A 和 Tab B 就是这样，直到用户实际点击 Tab A 然后TabAReport 组件被渲染。

我实际上希望TabAReport 组件自动显示在页面渲染中，但由于某种原因，它没有。

我相信我已经为第一个选项卡设置了自动显示所需的值。

任何帮助都会很棒

           const routes = ["/tab-a-report", "/tab-b-report"];

          <Tabs
            value=0
            onChange=handleChange
            textColor="default"
            variant="standard"                                                   
          >
            <Tab 
              value=0
              label="Tab A" 
              component=Link
              to=`$routes[0]/$id`
            />
            <Tab 
              value=1
              label="Tab B" 
              component=Link
              to=`$routes[1]/$id`
            />
          </Tabs>

        <Switch>
          <Route exact path="/tab-a-report/:id" component=TabAReport />
          <Route exact path="/tab-b-report/:id" component=TabBReport />
        </Switch>

【参考方案1】：

您可以通过将不带路径的路由指定为 Switch 元素的最后一个子元素来实现此目的。如果没有其他路由的路径与实际路径匹配，则将呈现此路由。详情请见React Router: Switch。

<Switch>
    <Route exact path="/tab-a-report/:id" component=TabAReport />
    <Route exact path="/tab-b-report/:id" component=TabBReport />
    <Route><TabAReport id=id /></Route> //pass the default id as property
</Switch>

要访问子组件中的 :id 参数，请使用 useParam hook 或在默认情况下从属性中读取它。

const id = useParams() || id: props.id

【讨论】：

但是作为路线的一部分，我像现在一样传入:id，它显示但不返回任何数据，因为它需要id。有什么想法吗？

如果不想指定 id 但想渲染默认组件，则必须在组件内定义默认 Id。

了解我可以使用 useParam 钩子，但作为 switch 元素的最后一个子元素的一部分，:id 没有被传递，我需要id。你能解释一下在没有提供路由的情况下如何使用这个 useParam 钩子吗？

现在一切顺利，但感谢您提供聊天服务。

const id = useParams() || id: props.id