Question

我有一组使用材料ui作为基础的标签。我希望能够链接到其中一个选项卡，以便在登录页面时打开该选项卡。在反应应用程序之外对我来说非常简单（添加锚点）。我已经搜索了解决方案，但没有好处，我怀疑我需要对主路由器和路径做一些事情并传递一个属性，告诉标签哪个是打开的。然后只需在链接上添加该属性即可传递给页面？

我将使用<Link>

链接到标签（来自其他页面）

<Link to="/page/tabpage" title="Link to tab 2">Link to tab 2</Link>

我想我需要将此链接中的值传递给URL，然后打开该特定选项卡，例如：

<Link to="/page/tabpage#tab2" title="Link to tab 2">Link to tab 2</Link>

此页面的我的应用路径路径如下所示：

import { Route } from 'react-router-dom';

<Route path={`${match.url}/page/tabpage`}
        component={asyncComponent(() => import('./routes/tabpage'))} />

标签页看起来像以下内容:(一般的想法）

import React from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import Tabs, { Tab } from "material-ui/Tabs";
import { whenGapiReady } from "../../../util/gapiHelper";

function TabContainer({ children, dir, className }) {
  return (
    <div dir={dir} className={className} style={{ padding: 8 * 3 }}>
      {children}
    </div>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
  dir: PropTypes.string.isRequired
};

class tabpage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
  }

  componentWillMount() {
    whenGapiReady(() => {});
  }
  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    return (
      <div>
        <Tabs
          initialSelectedIndex={this.state.value}
          value={this.state.value}
          onChange={this.handleChange}
          indicatorColor="primary"
          textColor="primary"
          fullWidth
          scrollable
          scrollButtons="on"
          classes={{ root: styles.root }}
        >
          <Tab className="tab" label="Tab 1" />
          <Tab className="tab" label="Tab 2" />
        </Tabs>

        <TabContainer dir={theme.direction}>TAB 1 CONTENT ECT..</TabContainer>
        <TabContainer dir={theme.direction}>TAB 2 CONTENT ECT..</TabContainer>
      </div>
    );
  }
}
const mapStateToProps = ({}) => {};

export default tabpage;

Answer 1

与redux或本地存储一起使用以管理活动标签及其内容。

映射标签并渲染链接。

然后使用链接匹配的路径在不同的路径中渲染不同的组件。

您可能会发现我的一些代码很有用：https://github.com/SimonMulquin/EventsPlanning/tree/master/client/src/ui

使用react-router-dom链接到特定的mui-tab

1 个答案: