Material-UI的Tabs是否与React Router 4集成? [英] Material-UI's Tabs integration with react router 4?

问题描述

新的react-router语法使用Link组件在路由之间移动.但是，如何将其与material-ui集成?

The new react-router syntax uses the Link component to move around the routes. But how could this be integrated with material-ui?

就我而言，我将标签用作主要的导航系统，因此从理论上讲，我应该具有以下内容:

In my case, I'm using tabs as the main navigation system, So in theory I should have something like this:

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道具?

But when it renders, material-ui throws an error that the child of Tabs must be a Tab component. What could be the way to proceed? How do I manage the isActive prop for the tab?

预先感谢

推荐答案

我的讲师帮助我使用React Router 4.0的withRouter包装了Tabs组件以启用历史记录方法，如下所示:

My instructor helped me with using React Router 4.0's withRouter to wrap the Tabs component to enable history methods like so:

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

Simply add BrowserRouter to index.js and you're good to go.

这篇关于Material-UI的Tabs是否与React Router 4集成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！