React-Router-DOM | URL gets redirected to the root Path

I have set an AppRouter with React-Router-DOM. Version 4. I have a table with Links attached to them, and I fetch data from the server, for each one. I want to see the details screen, of each item, when I click the Link in the table. That doesn't work.

Below is the AppRouter, which is the Router for the Application. All other routes are working perfectly FYI:

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;

In the TableConfig Component, which is the configuration file for the Table columns:

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'
  }
];

In the Service file, which makes the endpoint call to the server:

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);
};

I mean what is the problem here. I really don't get it at all. I tried a few different scenarios.

I try manually inserting a BrowserRouter in the AppRouter, although, the Router is set higher in the App chain, DIDN'T WORK.

I tried, manually inserting the endpoint data, as a constant file. Without making an API call, DIDN'T WORK.

I get the URL, changing for a single second, but on refresh, it does go back to /. I am really stumped. I implemented the same architecture in 2 different instances with the same methodology. Worked perfectly. Exactly the same.

My App is built on React/Redux/Redux-Observable, for asynchronous operations. On another note. I also pass the getGroup Service, to my GroupDetailsScreen to fetch either data or an error message, but the problem is with the router. I get the groupName on the URL, but get redirected, for some reason. What is going on?

One small Update I just deiscovered. It seems, that the URL for react-router-dom, is dropping one parameter. What I mean is this.

On the TableOverview Screen, the URL is localhost:3000/something/groups,

But when I click the link it goes to localhost:3000/groups/details/name. **

I am readin on Github about this issue here : https://github.com/ReactTraining/react-router/issues/5870, haven't found a solid solution yet. But I can go and add something here:

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

It is a very weird solution, that I am not willing to continue. Foe development is fine, but I need to actually find a solution on this. Any input is welcomed..

Can someone tell me what stupid thing I do here, and doesn't work. Thank you!!