Реакция: Попытка выбрать источник правды и решения по управлению состоянием, наиболее эффективный для этого сценария. - PullRequest
Новая
       21

Реакция: Попытка выбрать источник правды и решения по управлению состоянием, наиболее эффективный для этого сценария.

0 голосов
/ 24 июня 2019

Я пытаюсь решить, какое решение для управления состоянием выбрать. Я не думаю, что мне нужен Redux, может быть, Context API или локальное хранилище могут помочь, или, может быть, другое предложение. Все, что мне просто нужно, - это чтобы состояния моих вкладок были напрямую связаны с их целевым URL при нажатии на них, и чтобы состояние сохранялось при обновлении страницы. Конечно, это означает, что до тех пор, пока в URL-адресе есть определенная строка, состояние будет обновляться до соответствующего значения вкладки, что также будет защищать значение состояния при нажатии на ссылку, направляющую пользователя на этот URL-адрес.

Надеюсь, я был достаточно ясен, спасибо, что нашли время прочитать это.

Вот импорт: 

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Drawer from '@material-ui/core/Drawer';
import Hidden from '@material-ui/core/Hidden';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import {withStyles } from '@material-ui/core/styles';
import SearchBar from '../TopBar/SearchBar'
import Home from '../Screens/Home'
import Contact from '../Screens/Contact'
import Profile from '../Screens/Profile'
import Settings from '../Screens/Settings'
import Messages from '../Screens/Messages'
import Products from '../Screens/Products'
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { Switch, Route, Link, BrowserRouter} from "react-router-dom";

Переменная ящика, содержащая структуру вкладки: 

const drawer = (
  <Route
    path="/"
    render={() => (
      <nav>
        <div style={{ left: 70, position: 'relative', marginTop: 40 }}>
          <VerticalTabs
            value={values}
            variant="fullWidth"
            onChange={this.handleChange}
          >
            <MyTab
              component={Link}
              to="/"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  version="1.1"
                  id="Capa_1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                  x="0px"
                  y="0px"
                  width="460.298px"
                  height="460.297px"
                  viewBox="0 0 460.298 460.297"
                  space="preserve"
                  fill={values === 0 ? '#0D9DCE' : '#9B9B9B'}
                  className="home"
                >
                  {homeA}
                  {homeB}
                </svg>
              }
              label={
                <p
                  className="home-Text"
                  style={{ color: values === 0 ? 'white' : '#9B9B9B' }}
                >
                  Home
                </p>
              }
            />
            <MyTab
              component={Link}
              to="/Screens/Contact"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  height="512pt"
                  viewBox="0 0 512 512"
                  width="512pt"
                  xmlns="http://www.w3.org/2000/svg"
                  fill={values === 1 ? '#0D9DCE' : '#9B9B9B'}
                  className="processes"
                >
                  {ContactA}
                </svg>
              }
              label={
                <p
                  className="processes-Text"
                  style={{ color: values === 1 ? 'white' : '#9B9B9B' }}
                >
                  Contact
                </p>
              }
            />
            <MyTab
              component={Link}
              to="/Screens/Profile"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  version="1.1"
                  id="Capa_1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                  x="0px"
                  y="0px"
                  viewBox="0 0 512.001 512.001"
                  space="preserve"
                  className="designs"
                  fill={values === 2 ? '#0D9DCE' : '#9B9B9B'}
                >
                  {ProfileA}
                </svg>
              }
              label={
                <p
                  className="designs-Text"
                  style={{ color: values === 2 ? 'white' : '#9B9B9B' }}
                >
                  Profile
                </p>
              }
            />
            <MyTab
              component={Link}
              to="/Screens/Settings"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  version="1.1"
                  id="Capa_1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                  x="0px"
                  y="0px"
                  viewBox="0 0 512 512"
                  space="preserve"
                  className="materials"
                  fill={values === 3 ? '#0D9DCE' : '#9B9B9B'}
                >
                  {SettingsA}
                  {SettingsB}
                </svg>
              }
              label={
                <p
                  className="materials-Text"
                  style={{ color: values === 3 ? 'white' : '#9B9B9B' }}
                >
                  Settings
                </p>
              }
            />
            <MyTab
              component={Link}
              to="/Screens/Messages"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                  width="512"
                  height="512"
                  viewBox="0 0 60 60"
                  version="1.1"
                  className="printers"
                  fill={values === 4 ? '#0D9DCE' : '#9B9B9B'}
                >
                  {MessagesA}
                  {MessagesB}
                  {MessagesC}
                  {MessagesD}
                  {MessagesE}
                  {MessagesF}
                </svg>
              }
              label={
                <p
                  className="printers-Text"
                  style={{ color: values === 4 ? 'white' : '#9B9B9B' }}
                >
                  Messages
                </p>
              }
            />
            <MyTab
              component={Link}
              to="/Screens/Products"
              disableRipple={widthS < 599 ? true : false}
              onClick={this.handleDrawerToggle}
              icon={
                <svg
                  height="512pt"
                  viewBox="0 0 512 512"
                  width="512pt"
                  xmlns="http://www.w3.org/2000/svg"
                  className="forum"
                  fill={values === 5 ? '#0D9DCE' : '#9B9B9B'}
                >
                  {ProductsA}
                  {ProductsB}
                  {ProductsC}
                </svg>
              }
              label={
                <p
                  className="QA-Text"
                  style={{ color: values === 5 ? 'white' : '#9B9B9B' }}
                >
                  Products
                </p>
              }
            />
          </VerticalTabs>
        </div>
      </nav>
    )}

/>
);

Вот структура маршрутизации в BrowserRouter: 

<Switch>
  <Route path="/Screens/Contact" component{Contact} />
  <Route path="/Screens/Profile" component={Profile} />
  <Route path="/Screens/Settings" component={Settings}  />
  <Route path="/Screens/Messages" component={Messages} />
  <Route path="/Screens/Products" component={Products}  />
  <Route path="/" component={Home} />
</Switch>
...