Material-UI的Tabs是否与React Router 4集成？

小编典典

Material-UI的Tabs是否与React Router 4集成？

reactjs

新的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标签的道具？

提前致谢

阅读 291

2020-07-22

共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，就可以了。

2020-07-22