Реакт-Роутер-ДОМ |URL перенаправляется в корневой путь

Question

Я установил AppRouter с React-Router-DOM.Версия 4. У меня есть таблица с прикрепленными ссылками, и я получаю данные с сервера для каждой из них.Я хочу видеть экран сведений о каждом элементе, когда нажимаю ссылку в таблице.Это не работает.

Ниже показан AppRouter , который является маршрутизатором для приложения.Все остальные маршруты работают отлично. К вашему сведению:

import React from 'react';
import PropsTypes from 'prop-types';
import { withProps } from 'recompose';
import ReactRouterPropTypes from 'react-router-prop-types';
import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import { Authorization } from 'util/viewPermissionUtil';
import { Permission } from 'util/permissionsUtil';
import permissions from 'constants/roles';

import GroupDetailsScreen from 'GroupDetailsScreen';
import GroupsScreen from 'GroupScreen';
import UsersScreen from 'containers/UserScreen';

const GetUser = Authorization(({ user }) =>
  Permission(user, [permissions.somepermission])
);

const AuthUsers = GetUser(
  ({ ...props }) => <UsersScreen {...props} />,
  () => <Redirect to="/" />
);

const GetGroupsDetails = Authorization(({ user }) =>
  Permission(user, [permissions.someOtherPermissions])
);

const AuthGroupDetails = GetGroupsDetails(
  ({ ...props }) => <GroupDetailsScreen {...props} />,
  () => <Redirect to="/" />
);

const UsersRoute = ({ user }) => withProps({ user })(AuthUsers);
const GroupDetailsRoute = ({ user }) => withProps({ user })(AuthGroupDetails)

const Router = ({ match: { path }, user }) => (
  <Switch>
    <Route path={`${path}/groups`} component={GroupsScreen} />
    <Route path={`${path}/groups/details/:name`} component={GroupDetailsRoute({ user })} />
    <Route path={`${path}/users`} component={UsersRoute({ user })} />
    <Redirect to={`${path}/users`} />
  </Switch>
);

Router.propTypes = {
  match: ReactRouterPropTypes.match.isRequired,
  user: PropsTypes.object
};

function mapStateToProps(state) {
  return {
    user: state.auth.user
  };
}

const ConnectedRouter = connect(mapStateToProps)(Router);
const AppRouter = withRouter(({ ...props }) => <ConnectedRouter {...props} />);

export default AppRouter;

В компоненте TableConfig , который является файлом конфигурации для столбцов таблицы:

function groupNameRenderer(cell, row) {
  return (
    <span className="text-align-left">
      <Link
        to={{
          pathname: `/groups/details/${row.name}`
        }}
      >
        {cell}
      </Link>
    </span>
  );
}

export const columns = [
  {
    dataField: 'name',
    sort: false,
    text: 'Group',
    formatter: groupNameRenderer,
  },
  {
    dataField: 'field',
    sort: true,
    text: 'FIELD'
  },
  {
    dataField: 'someField',
    sort: true,
    text: 'SOME FIELD'
  }
];

В служебном файле , который выполняет вызов конечной точки на сервер:

import { endpointInstance } from 'services/httpFactory';
import httpMethod from 'constants/httpMethod';

import endpoint from './endpoint';

export const getGroup = name => {
  const options = {
    method: httpMethod.GET,
    url: endpoint.GET_GROUP(name)
  };
  return endpointInstance(options);
};

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

Я пытаюсь вручную вставить BrowserRouter в AppRouter, хотя Маршрутизатор установлен выше в цепочке приложений, DIDN'T WORK.

Я пытался вручную вставитьданные конечной точки в виде постоянного файла.Без вызова API, DIDN'T WORK.

Я получаю URL, меняющийся на одну секунду, но при обновлении он возвращается к /.Я действительно в тупик.Я реализовал одну и ту же архитектуру в 2 разных случаях по одной и той же методологии.Работал отлично.Точно так же.

Мое приложение построено на React/Redux/Redux-Observable для асинхронных операций.На другой ноте.Я также передаю сервис getGroup своему GroupDetailsScreen, чтобы получить либо данные, либо сообщение об ошибке, но проблема связана с маршрутизатором.Я получаю groupName на URL, но по какой-то причине меня перенаправляют.Что происходит?

Одно небольшое обновление, которое я только что обнаружил.Похоже, что URL для response-router-dom сбрасывает один параметр.Я имею в виду следующее: .

. На экране просмотра таблицы URL-адрес: localhost:3000/something/groups,

Но когда я нажимаю на ссылку, она переходит на localhost:3000/groups/details/name.**

Я читаю на Github об этой проблеме здесь: https://github.com/ReactTraining/react-router/issues/5870, еще не нашел твердого решения.Но я могу пойти и добавить something здесь:

pathname: `something/groups/details/${row.name}`

Это очень странное решение, которое я не хочу продолжать.Развитие противника в порядке, но мне нужно найти решение по этому вопросу.Приветствуется любая информацияСпасибо !!