реагирует роутер dom, заменяет URL браузера, но не go на страницу

Question

Заранее большое спасибо

Я пытаюсь получить доступ к дочерней странице компонента Drawer, однако, когда я пытаюсь использовать hisotry.pu sh ('имя маршрута'), он просто заменяет это в URL, но не переходит к ссылке, я использую службу навигации по истории. Я не знаю, является ли помеха и компонент дочерним объектом ящика, но он имеет тот же адрес. файл саг

src/service/routes.js

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

src/modules/sagas.js

function* detailsUsers({ payload: { user } }) {
  yield put(defineInformationDetails(user));
  history.push(`Drawer/EditAdm`);
}

src/router/index.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Login from '../pages/Login';
// import Panel from '../pages/Panel';
import Panel from './Drawer';
import * as isUserLogged from '../store/modules/auth/actions';
import ResetPassword from '../pages/ResetPassword';
import ChangePassword from '../pages/ChangePassword';

export default function Routes() {
  return (
    <Switch>
      <Route path="/" exact component={Login} />
      <Route path="/Login" component={Login} />
      <Route path="/ResetPassword" component={ResetPassword} />
      <Route path="/ChangePassword" component={ChangePassword} />
      <Route path="/Drawer" component={Panel} />
    </Switch>
  );
}

src/routes/drawer.js

 const [drawer, setDrawer] = useState({
    name: 'Menu',
    subname: '',
    options: [
      {
        id: '1',
        name: 'Home',
        open: true,
        link: `/`,
        icon: () => <IconHome />,
        route: {
          path: `${path}/`,
          exact: true,
          main: () => <Home />,
        },
        suboptions: [],
      },
      {
        id: '2',
        name: 'Cadastro de Usuário',
        open: false,
        link: false,
        icon: () => <IconUserList />,
        route: null,
        suboptions: [
          {
            id: '1',
            name: 'Buscar/Editar Usuário',
            open: false,
            link: `/SearchUser`,
            icon: () => <IconSearchFa />,
            route: {
              path: `${path}/SearchUser`,
              exact: true,
              main: () => <EditUser />,
            },
          },
          {
            id: '2',
            name: 'Administrador',
            open: false,
            link: `/AdmRegistration`,
            icon: () => <IconRegisters />,
            route: {
              path: `${path}/AdmRegistration`,
              exact: true,
              main: () => <AdmRegistrator />,
            },
          },
          {
            id: '5',
            name: 'Fornecedor',
            open: false,
            link: `/SupplierRegistrator`,
            icon: () => <IconRegisters />,
            route: {
              path: `${path}/SupplierRegistrator`,
              exact: true,
              main: () => <SuppliedRegistrator />,
            },
          },
          {
            id: '6',
            name: 'Controle de acesso nos eventos',
            open: false,
            link: `/EventAcess`,
            icon: () => <IconEvent />,
            route: {
              path: `${path}/EventAcess`,
              exact: true,
              main: () => <EventAcess />,
            },
          },
          {
            id: '7',
            name: 'Editar Administrador',
            open: false,
            link: `/EditAdm`,
            icon: () => {},
            route: {
              path: `${path}/EditAdm`,
              exact: true,
              main: () => <EditAdm />,
            },
          },
        ],
      },
    ],
  });
  return (
    <Router>
      <AreaPanel>
        <Header
          name={
            localStorage.getItem('NeoTicket@name') !== null
              ? localStorage
                  .getItem('NeoTicket@name')
                  .substring(0, 1)
                  .toUpperCase()
                  .concat(localStorage.getItem('NeoTicket@name').substring(1))
              : 'Nome Usuário'
          }
          functionOnClickDrawer={() => setOpenDrawer(!openDrawer)}
          openDrawer={openDrawer}
          functionOnClickUser={() => setOpenUser(!openUser)}
          openUser={openUser}
        />
        <AreaDrawerPanel>
          <AreaDrawer open={openDrawer}>
            <Drawer
              name={drawer.name}
              subname={drawer.subname}
              openDrawer={openDrawer}
              options={drawerSearch.options}
              functionOnClickOpenSuboption={id =>
                functionOpenSuboption(id, drawerSearch)
              }
              functionSearchText={text => setSearchText(text)}
              functionOnClickName={name => functionGetNamePage(name)}
              path={path}
            />
          </AreaDrawer>

          <AreaContent open={openDrawer}>
            <HeaderContainer>
              {/* {drawer.options.map((option, index) => {
                const { link } = option;
                if (link) {
                  return (
                    <HeaderContent
                      key={index.toString()}
                      name={namePage === '' ? 'TESTE' : namePage}
                    />
                  );
                }
              })} */}

              <Switch>
                {drawer.options.map((option, index) => {
                  const { link, route, suboptions } = option;
                  if (link) {
                    return (
                      <Route
                        key={index.toString()}
                        path={route.path}
                        exact={route.exact}
                        children={<route.main />}
                      />
                    );
                  }
                  return suboptions.map((suboptions, indexParam) => {
                    return (
                      <Route
                        key={indexParam.toString()}
                        path={suboptions.route.path}
                        exact={suboptions.route.exact}
                        children={<suboptions.route.main />}
                      />
                    );
                  });
                })}
              </Switch>
            </HeaderContainer>
          </AreaContent>
        </AreaDrawerPanel>
      </AreaPanel>
    </Router>

Я не понимаю, как решить.

Answer 1

в файле sagas заменяют.

history.push(`Drawer/EditAdm`)

до

const { pathname } = history.location;
window.location.href = `${pathname}/EditAdm`;

Answer 2

возможное разрешение: использование компонента с withRouter \src\pages\UserRegister\index.js

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { Container } from './styles';
import * as HomeActions from '../../store/modules/home/actions';
import Button from '../../components/ButtonIcon';

function UserRegistration({ history }) {
  const dispatch = useDispatch();
  function onChangePageChildren() {
    dispatch(HomeActions.changePageChildren(history));
  }
  return (
    <Container>
      <a>Tela1</a>
      <Button
        title="chamar sagas para ir para tela de listagem"
        functionOnClick={() => onChangePageChildren()}
      />
    </Container>
  );
}
export default withRouter(UserRegistration);

однако при этом он оставит свойства навигации готовыми к использованию, чтобы вы могли взять свойство history и передать его в качестве параметра через действие и через него через саги. файл sagas

import { all, call, put, takeLatest } from 'redux-saga/effects';
import { createBrowserHistory } from 'history';
import {
  loading,
  successAction,
  failureAction,
  breakAction,
} from '../common/actions';

function* requestChangePage({ payload: { history } }) {
  yield put(loading(''));
  history.push('/Drawer/userList');possível resolução:
abrace o componente com withRouter
\src\pages\UserRegister\index.js

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