Состояние тумблера React-Router по умолчанию отключается от / Route - PullRequest
Новая
       25

Состояние тумблера React-Router по умолчанию отключается от / Route

0 голосов
/ 08 мая 2019

Я создаю приложение на React, используя React-Router v4, панель инструментов, которая помогает пользователям видеть и визуализировать свои финансовые транзакции.В моем приложении у меня есть трехкомпонентный компонент-тумблер, каждый из которых ведет к своему маршруту (/dashboard/visualization, /dashboard/manage, /dashboard/history).Как props он принимает значение selectedOption, которое управляет выбранной опцией переключения, которую видит пользователь.Требуется предварительное значение по умолчанию.

Когда пользователь нажимает на один из 3 вариантов, я хочу, чтобы маршрут изменился на этот вариант.Чтобы сделать это, я в настоящее время оборачиваю свой компонент тумблера в withRouter() компонент высшего порядка, чтобы дать ему объект history, и использую this.props.history.push() в моем обратном вызове onSelectOption, что является лучшей практикой, отмеченной вэта статья о React-Router, на которую ссылаются многие люди: https://tylermcginnis.com/react-router-programmatically-navigate/.

МОЯ ПРОБЛЕМА. Необходимость выбора переключателем по умолчанию для моего переключателя приводит к отключению моего состояния и моего URL / маршрута.Я нажму на опцию, и она отправит меня по правильному маршруту, но изменение маршрута перемонтирует мой компонент-переключатель, который сбрасывает state обратно на значение по умолчанию "manage" независимо от того, какую опцию я выберу. Так что если я на /dashboard/manage, с state { value: "manage"}.Я нажимаю на «Журнал», и this.props.history.push отправляет меня на /dashboard/history, но, поскольку мой компонент тумблера перерисовывает по новому маршруту, переключатель застрял с настройкой по умолчанию "manage".Только когда я нажимаю «История» второй раз, переключатель фактически перемещается и анимируется в «Историю», поскольку маршрут уже задан, поэтому <MultiToggle /> не выполняет повторную визуализацию. Как я могу обойти компонент переключателя, автоматически возвращающийся к значению по умолчанию при повторном рендеринге, когда маршрут переключается?

Я попытался взломать код ниже, где я использую componentDidMount, чтобы искусственноустановить состояние на основе текущего маршрута - какой тип работает, но я не получаю анимацию от выбора переключателя, и это заставляет приложение чувствовать себя действительно статичным.

Мой компонент 

import React from 'react';
import MultiToggle from 'react-multi-toggle';
import { Link, Redirect, withRouter } from 'react-router-dom';


const groupOptions = [
  {
    displayName: 'Visualization',
    value: "visualization"
  },
  {
    displayName: 'Manage',
    value: "manage"
  },
  {
    displayName: 'History',
    value: "history"
  },
];

class MultiToggle extends React.Component {
  state = {
    value: "history"
  }

  onSelect = (value) => {
    this.props.history.push(`/dashboard/${value}`);
    this.setState({ 
        value: value 
    }); 
  }

  componentDidMount() {
    //MY HACK
    let currentRoute = this.props.history.location.pathname.substring(11);

    this.setState({ 
      value: currentRoute 
    });

  }

  render() {
    return (
      <MultiToggle
        options={groupOptions}
        selectedOption={this.state.value}
        onSelectOption={this.onSelect}
      />
    );
  }

}

export default withRouter(DashboardMultiToggleSwitch);
...