Material-UI 选项卡在页面呈现时不显示组件报告

Question

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

我实际上希望 TabAReport 组件在页面呈现时自动显示，但由于某些原因，它没有。

我想我已经将第一个选项卡的要求ui红色值设置为自动显示。

如有帮助将不胜感激

           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>

Answer 1

您可以通过将没有路径的路由指定为 Switch 元素的最后一个子元素来实现。如果其他路由路径的 none 与实际路径匹配，则将呈现此路由。有关详细信息，请参阅 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}

Material-UI 选项卡在页面呈现时不显示组件报告

Material-UI tab not displaying component report on page render

javascript

tabs

reactjs

react-router

material-ui