使用带有反应路由器的材料ui选项卡？答案

【问题标题】：Using material ui tabs with react router?使用带有反应路由器的材料ui选项卡？
【发布时间】：2020-12-09 15:24:29
【问题描述】：

我在 react/typescript 中有一个项目。我有一个看起来像这样的反应路由器

const Root = () => (
    <>
      <NavBar/>
      <Router>
        <Route path="/" component={Home} />
          <Route path="/timer" component={TimerPage} />
      </Router>
    </>
);

我有一个 Material-ui 应用栏，看起来像这样

export default function NavBar() {
  return (
      <div>
        <AppBar position="static">
          <Tabs>
              <Tab label="Timer" to="/timer" component={TimerPage}  />
          </Tabs>
        </AppBar>
      </div>
  );
}

有几个问题 - 首先 Tab 中的“to”无法编译。其次，鉴于它们做的事情非常相似，我如何让这两个组件协同工作？

【问题讨论】：

这能回答你的问题吗？ Using material-UI tabs with react

标签： javascript reactjs typescript material-ui

【解决方案1】：

如果您尝试导航到另一个页面，请包装您的选项卡组件，让 react-router 处理导航并使用 react-router 历史记录导航，

 <Tabs value={value} onChange={handleChange} aria-label="simple tabs 
     example">
   <div onClick={() => history.push("/timer")}>
        <Tab   label="Timer" />
    </div>
  </Tabs>

【讨论】：

【解决方案2】：

<Router>
        <Route path="/" component={Home} />
        <Route path="/timer" component={TimerPage} />
</Router>

Route 应该在 Switch 内。此外，如果您写path="/"，这意味着您将访问的任何页面仍将转到“主页”页面。这是因为 react-router 做了类似“最少”的路由检查。因此，如果您在"/images/1" 之前定义了路径"/images"，两者都会将您路由到"/images"。相反，您可以更改这些路径的顺序，或在第一个路径之前添加 exact 关键字。

看看下面的例子。

<Router>
    <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/timer" component={TimerPage} />
    </Switch>
</Router>

或

<Router>
    <Switch>
        <Route path="/timer" component={TimerPage} />
        <Route path="/" component={Home} />
    </Switch>
</Router>

至于你的第二个问题，你应该把你的AppBar（或div或任何容器）放在Router中，并将Link分配给componentTab的属性：

<Router>
    <AppBar position="static">
          <Tabs>
              <Tab label="Timer" to="/timer" component={Link}  />
          </Tabs>
    </AppBar>
</Router>

请记住，Link 组件是从 react-router 导入的，而不是从 @mui 导入的。

【讨论】：