Material-UI 的选项卡与反应路由器 4 集成？

Question

新的 react-router 语法使用 Link 组件来移动路由。但是这怎么能与 material-ui 集成呢？

就我而言，我使用标签作为主要导航系统，所以理论上我应该有这样的东西：

 const TabLink = ({ onClick, href, isActive, label }) =>
  <Tab
    label={label}
    onActive={onClick}
  />

export default class NavBar extends React.Component {
  render () {
    return (
      <Tabs>
        <Link to="/">{params => <TabLink label="Home" {...params}/>}</Link>
        <Link to="/shop">{params => <TabLink label="shop" {...params}/>}</Link>
        <Link to="/gallery">{params => <TabLink label="gallery" {...params}/>}</Link>
      </Tabs>
    )
  }
}

但是在渲染时，material-ui 会抛出一个错误，即 Tabs 的子级必须是 Tab 组件。有什么方法可以继续？如何管理选项卡的 isActive 道具？

提前致谢

原文由 Daniel Ramos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我的导师帮助我使用 React Router 4.0 的 withRouter 来包装 Tabs 组件以启用这样的历史方法：

 import React, {Component} from "react";
import {Tabs, Tab} from 'material-ui';
import { withRouter } from "react-router-dom";

import Home from "./Home";
import Portfolio from "./Portfolio";

class NavTabs extends Component {

 handleCallToRouter = (value) => {
   this.props.history.push(value);
 }

  render () {
     return (
      <Tabs
        value={this.props.history.location.pathname}
        onChange={this.handleCallToRouter}
        >
        <Tab
          label="Home"
          value="/"
        >
        <div>
           <Home />
        </div>
        </Tab>
        <Tab
          label="Portfolio"
          value="/portfolio"
            >
          <div>
            <Portfolio />
          </div>
        </Tab>
      </Tabs>
    )
  }
}

export default withRouter(NavTabs)

只需将 BrowserRouter 添加到 index.js 就可以了。

原文由 gkatchmar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

另一种解决方案 ( https://codesandbox.io/s/l4yo482pll ) 没有处理程序也没有 HOC，只有纯 react-router 和 material-ui 组件：

 import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { Switch, Route, Link, BrowserRouter, Redirect } from "react-router-dom";

function App() {
  const allTabs = ['/', '/tab2', '/tab3'];

  return (
    <BrowserRouter>
      <div className="App">
        <Route
          path="/"
          render={({ location }) => (
            <Fragment>
              <Tabs value={location.pathname}>
                <Tab label="Item One" value="/" component={Link} to={allTabs[0]} />
                <Tab label="Item Two" value="/tab2" component={Link} to={allTabs[1]} />
                <Tab
                  value="/tab3"
                  label="Item Three"
                  component={Link}
                  to={allTabs[2]}
                />
              </Tabs>
              <Switch>
                <Route path={allTabs[1]} render={() => <div>Tab 2</div>} />
                <Route path={allTabs[2]} render={() => <div>Tab 3</div>} />
                <Route path={allTabs[0]} render={() => <div>Tab 1</div>} />
              </Switch>
            </Fragment>
          )}
        />
      </div>
    </BrowserRouter>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

原文由 Gildas Garcia 发布，翻译遵循 CC BY-SA 4.0 许可协议