Mixing
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!!
javascript reactjs redux react-router-v4 redux-observable
asked Jan 1 at 17:55
Dimitris EfstDimitris Efst
123112
add a comment |
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!!
javascript reactjs redux react-router-v4 redux-observable
asked Jan 1 at 17:55
Dimitris EfstDimitris Efst
123112
If you see small typos, please don't answer them. I changed the names for the files and components because they were too revealing. The application has no typos...
– Dimitris Efst
Jan 1 at 17:56
Try addingexacthere:<Route path={``${path}/groups``} component={GroupsScreen} /><---<Route exact path={``${path}/groups``} component={GroupsScreen} />
– quirimmo
Jan 1 at 18:00
Yeah, I, tried that. Nothing is happening. Still, the URL changes, but gets redirected...
– Dimitris Efst
Jan 1 at 18:09
To iterate on the amount of frustration I have regarding this, I also have a deleteRendere, for every Table row, that his the same API endpoint, calls for the row.name, and the row gets deleted just fine.
– Dimitris Efst
Jan 1 at 18:12
add a comment |
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!!
javascript reactjs redux react-router-v4 redux-observable
asked Jan 1 at 17:55
Dimitris EfstDimitris Efst
123112
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!!
javascript reactjs redux react-router-v4 redux-observable
javascript reactjs redux react-router-v4 redux-observable
asked Jan 1 at 17:55
Dimitris EfstDimitris Efst
123112
asked Jan 1 at 17:55
Dimitris EfstDimitris Efst
123112
edited Jan 1 at 18:35
Dimitris Efst
asked Jan 1 at 17:55
Dimitris EfstDimitris Efst
123112
asked Jan 1 at 17:55
Dimitris EfstDimitris Efst
123112
asked Jan 1 at 17:55
Dimitris EfstDimitris Efst
123112
123112
If you see small typos, please don't answer them. I changed the names for the files and components because they were too revealing. The application has no typos...
– Dimitris Efst
Jan 1 at 17:56
Try addingexacthere:<Route path={``${path}/groups``} component={GroupsScreen} /><---<Route exact path={``${path}/groups``} component={GroupsScreen} />
– quirimmo
Jan 1 at 18:00
Yeah, I, tried that. Nothing is happening. Still, the URL changes, but gets redirected...
– Dimitris Efst
Jan 1 at 18:09
To iterate on the amount of frustration I have regarding this, I also have a deleteRendere, for every Table row, that his the same API endpoint, calls for the row.name, and the row gets deleted just fine.
– Dimitris Efst
Jan 1 at 18:12
add a comment |
If you see small typos, please don't answer them. I changed the names for the files and components because they were too revealing. The application has no typos...
– Dimitris Efst
Jan 1 at 17:56
Try addingexacthere:<Route path={``${path}/groups``} component={GroupsScreen} /><---<Route exact path={``${path}/groups``} component={GroupsScreen} />
– quirimmo
Jan 1 at 18:00
Yeah, I, tried that. Nothing is happening. Still, the URL changes, but gets redirected...
– Dimitris Efst
Jan 1 at 18:09
To iterate on the amount of frustration I have regarding this, I also have a deleteRendere, for every Table row, that his the same API endpoint, calls for the row.name, and the row gets deleted just fine.
– Dimitris Efst
Jan 1 at 18:12
If you see small typos, please don't answer them. I changed the names for the files and components because they were too revealing. The application has no typos...
– Dimitris Efst
Jan 1 at 17:56
If you see small typos, please don't answer them. I changed the names for the files and components because they were too revealing. The application has no typos...
– Dimitris Efst
Jan 1 at 17:56
Try adding
exact here: <Route path={``${path}/groups``} component={GroupsScreen} /> <--- <Route exact path={``${path}/groups``} component={GroupsScreen} />– quirimmo
Jan 1 at 18:00
Try adding
exact here: <Route path={``${path}/groups``} component={GroupsScreen} /> <--- <Route exact path={``${path}/groups``} component={GroupsScreen} />– quirimmo
Jan 1 at 18:00
Yeah, I, tried that. Nothing is happening. Still, the URL changes, but gets redirected...
– Dimitris Efst
Jan 1 at 18:09
Yeah, I, tried that. Nothing is happening. Still, the URL changes, but gets redirected...
– Dimitris Efst
Jan 1 at 18:09
To iterate on the amount of frustration I have regarding this, I also have a deleteRendere, for every Table row, that his the same API endpoint, calls for the row.name, and the row gets deleted just fine.
– Dimitris Efst
Jan 1 at 18:12
To iterate on the amount of frustration I have regarding this, I also have a deleteRendere, for every Table row, that his the same API endpoint, calls for the row.name, and the row gets deleted just fine.
– Dimitris Efst
Jan 1 at 18:12
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997670%2freact-router-dom-url-gets-redirected-to-the-root-path%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997670%2freact-router-dom-url-gets-redirected-to-the-root-path%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If you see small typos, please don't answer them. I changed the names for the files and components because they were too revealing. The application has no typos...
– Dimitris Efst
Jan 1 at 17:56
Try adding
exacthere:<Route path={``${path}/groups``} component={GroupsScreen} /><---<Route exact path={``${path}/groups``} component={GroupsScreen} />– quirimmo
Jan 1 at 18:00
Yeah, I, tried that. Nothing is happening. Still, the URL changes, but gets redirected...
– Dimitris Efst
Jan 1 at 18:09
To iterate on the amount of frustration I have regarding this, I also have a deleteRendere, for every Table row, that his the same API endpoint, calls for the row.name, and the row gets deleted just fine.
– Dimitris Efst
Jan 1 at 18:12