Material-UI的Tabs与react路由器4集成？

新的反应转子语法使用该Link组件在路径上移动.但是如何与它结合materiaul-ui？

就我而言,我使用制表符作为主导航系统,所以理论上我应该有这样的东西:

const TabLink = ({ onClick, href, isActive, label }) => 
  



export default class NavBar extends React.Component {
  render () {
    return (
      
        {params => }
        {params => }
        {params => }
      
    )
  }
}

但是当它呈现时,material-ui会抛出一个错误,即孩子Tabs必须是一个Tab组件.有什么办法可以继续？如何管理选项卡的isActive道具？

提前致谢

另一个没有处理程序或HOC的解决方案(https://codesandbox.io/s/l4yo482pll),只有纯粹的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 (
    
      

         (
            
              
                
                
                
              
              
                 
Tab 2
} />
                 
Tab 3
} />
                 
Tab 1
} />
              
            
          )}
        />
      
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

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 (
      
        
        

           
        
        
        
          

            
          
        
                 
    )
  }
}

export default withRouter(NavTabs)