在 React/Material ui 路由中设置默认活动选项卡

Posted 2023-02-22

【中文标题】在 React/Material ui 路由中设置默认活动选项卡

【英文标题】：Setting default active tab in React/ Material ui routing

【发布时间】：2021-11-26 04:08:08

【问题描述】：

我在我的 react 应用程序中使用 Material Ui 选项卡进行路由。我可以设置默认 url（这样 '/' url 将重定向到 '/firsttab' 路由，但即使路由正确，这也不会使 'First' 选项卡显示为活动状态。我该如何做到这一点？ 谢谢！

const routes = ["/firsttab", "/secondtab"];
function MainNavigation() 
  return (
    <div >
   <IonToolbar >
      <BrowserRouter >
        <Route
          path="/"
          render=(history) => (
            <AppBar>
              <Tabs 
              className='mat-tab-nav-bar'
              TabIndicatorProps=style: background:'primary'
              indicatorColor="primary"
              color="primary"
              variant="scrollable"
              scrollButtons="auto"
              aria-label="scrollable auto tabs"
              value=history.location.pathname !== "/" ? history.location.pathname : false
                  >
                <Tab className="mat-tab"
                  label="First"
                  value=routes[1]
                  component=Link
                  to=routes[1]
                ></Tab>
                <Tab className="mat-tab "
                  label="Second"
                  value=routes[0]
                  component=Link
                  to=routes[0]
                ></Tab>
              </Tabs>
            </AppBar>
          )
        ></Route>
       
        <Switch >
          <Route path="/scutes" component=Second></Route>
          <Route path="/gateways" component=First></Route>
          <Redirect exact from="/" to="/firsttab" /> <- this is the initial route redirect
        </Switch>
      </BrowserRouter>
      </IonToolbar>
    </div>

  );


export default MainNavigation;

【参考方案1】：

您可以创建一个函数来根据窗口位置检索选项卡索引，如下所示：

const getIndex = (location) => 
    const index = routes.findIndex(function (item, index) 
        if (item === location) return true;
    )
    return index

那么你可以这样称呼它：

value=history.location.pathname !== "/" ? getIndex(history.location.pathname) : false

注意，如果路径名为“/”时返回false，则不会选择选项卡

你会以这样的方式结束：

function MainNavigation() 

    const getIndex = (location) => 
        const index = routes.findIndex(function (item, index) 
            if (item === location) return true;
        )
        return index
    

    return (
        ...
        <Tabs
        ...
        value=history.location.pathname !== "/" ? getIndex(history.location.pathname) : false
        >
        ...
    )