Связывание с определенной вкладкой mui с использованием response-router-dom

Question

У меня есть набор вкладок, использующих пользовательский интерфейс в качестве основы.Я хочу иметь возможность ссылки на одну из вкладок, чтобы эта вкладка была открыта при посадке на страницу.Все очень просто для меня за пределами приложения реагировать (добавить якорь).Я искал решения, но ничего хорошего, я подозреваю, что мне нужно что-то сделать с основным маршрутизатором и путем и передать свойство, которое сообщает вкладке, какую из них открыть.Затем просто добавьте это свойство в ссылку для перехода на страницу?

Я буду ссылаться на вкладку (с другой страницы), используя <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

Используется с избыточным или локальным хранилищем для управления активными вкладками и их содержимым.

Сопоставьте свои вкладки и отобразите ссылки.

Затем выполните рендеринг различных компонентов на разных маршрутах с сопоставленными путями ссылок.

Вы можете найти часть моего кода полезной: https://github.com/SimonMulquin/EventsPlanning/tree/master/client/src/ui