Login route is not getting renderd on logout react
I am new to the react js . Now , Here, what I have is a private Route.
const PrivateRoute = ({ component: Component, isFetching, hasUserLogIn, path, ...rest }) => {
hasUserLogIn = localStorage.getItem("access_token");
if (hasUserLogIn !== undefined && hasUserLogIn !== null) {
hasUserLogIn = true;
} else {
hasUserLogIn = false;
}
console.log("hasUserLogIn",hasUserLogIn);
return hasUserLogIn ?
(
<Route
{...rest}
path={path}
component={Component}
/>
)
:
(
<Redirect
to={{
pathname: "/login",
state: { from: path }
}}
/>
)
};
<div>
<Router history={history}>
<div>
{this.props.isFetching && <Loading />}
<Switch>
<PrivateRoute exact path="/:job?" component={LandingScreen} />
<PrivateRoute exact path="/quiz-setup/:job" component={QuizSetupMain} />
<PrivateRoute exact path="/quiz-questions" component={FetchedQuestionComponent} />
<Route exact path="/login" component={LoginComponent} />
<Route exact path="/*" component={NotFound} something="foo" />
</Switch>
</div>
</Router>
</div>
)
handleLogout = () => {
this.props.logoutUser();
}
Here, first one is as soon as I log In success.
So, In login success I have written like ,
history.push('/'); then it redirects to the LandingScreen Component.
Now, I do have one dropdown, on change of that I am adding :job param in the route which is like ,
onchange ,
history.push({
pathname: "/" + `${jdId}`
});
So It again rerenders the LandingScreen component.
Now, on click of the logout button,
I want to redirect the use to the login page that is /login.
So, on click of logout what I do is ,
localStorage.clear();
history.push('/');
so with this it is not rendering the LoginComponent and also route does not get changes ,
But If I remove the :job? from the route it redirects to the login I mean renders the login component.
Can any one help me with this ?
javascript reactjs redux react-redux
asked Nov 26 '18 at 9:33
ganeshganesh
22119
|
show 4 more comments
I am new to the react js . Now , Here, what I have is a private Route.
const PrivateRoute = ({ component: Component, isFetching, hasUserLogIn, path, ...rest }) => {
hasUserLogIn = localStorage.getItem("access_token");
if (hasUserLogIn !== undefined && hasUserLogIn !== null) {
hasUserLogIn = true;
} else {
hasUserLogIn = false;
}
console.log("hasUserLogIn",hasUserLogIn);
return hasUserLogIn ?
(
<Route
{...rest}
path={path}
component={Component}
/>
)
:
(
<Redirect
to={{
pathname: "/login",
state: { from: path }
}}
/>
)
};
<div>
<Router history={history}>
<div>
{this.props.isFetching && <Loading />}
<Switch>
<PrivateRoute exact path="/:job?" component={LandingScreen} />
<PrivateRoute exact path="/quiz-setup/:job" component={QuizSetupMain} />
<PrivateRoute exact path="/quiz-questions" component={FetchedQuestionComponent} />
<Route exact path="/login" component={LoginComponent} />
<Route exact path="/*" component={NotFound} something="foo" />
</Switch>
</div>
</Router>
</div>
)
handleLogout = () => {
this.props.logoutUser();
}
Here, first one is as soon as I log In success.
So, In login success I have written like ,
history.push('/'); then it redirects to the LandingScreen Component.
Now, I do have one dropdown, on change of that I am adding :job param in the route which is like ,
onchange ,
history.push({
pathname: "/" + `${jdId}`
});
So It again rerenders the LandingScreen component.
Now, on click of the logout button,
I want to redirect the use to the login page that is /login.
So, on click of logout what I do is ,
localStorage.clear();
history.push('/');
so with this it is not rendering the LoginComponent and also route does not get changes ,
But If I remove the :job? from the route it redirects to the login I mean renders the login component.
Can any one help me with this ?
javascript reactjs redux react-redux
asked Nov 26 '18 at 9:33
ganeshganesh
22119
1
Component where you use the logout functionality might help in finding the issue
– Shubham Khatri
Nov 26 '18 at 9:56
I have just added that method where on click logout that thing like histroy push and clear localstorage happens
– ganesh
Nov 26 '18 at 9:59
can you try removing the query parameter?from:job?
– Pranay Tripathi
Nov 26 '18 at 10:06
Can you confirm whether PrivateRoute is re-rendered on logout and also is the url changing. If url is not changing, check if there is any error on your console.
– Shubham Khatri
Nov 26 '18 at 10:08
Warning: You tried to redirect to the same route you're currently on: "/login"
– ganesh
Nov 26 '18 at 10:17
|
show 4 more comments
I am new to the react js . Now , Here, what I have is a private Route.
const PrivateRoute = ({ component: Component, isFetching, hasUserLogIn, path, ...rest }) => {
hasUserLogIn = localStorage.getItem("access_token");
if (hasUserLogIn !== undefined && hasUserLogIn !== null) {
hasUserLogIn = true;
} else {
hasUserLogIn = false;
}
console.log("hasUserLogIn",hasUserLogIn);
return hasUserLogIn ?
(
<Route
{...rest}
path={path}
component={Component}
/>
)
:
(
<Redirect
to={{
pathname: "/login",
state: { from: path }
}}
/>
)
};
<div>
<Router history={history}>
<div>
{this.props.isFetching && <Loading />}
<Switch>
<PrivateRoute exact path="/:job?" component={LandingScreen} />
<PrivateRoute exact path="/quiz-setup/:job" component={QuizSetupMain} />
<PrivateRoute exact path="/quiz-questions" component={FetchedQuestionComponent} />
<Route exact path="/login" component={LoginComponent} />
<Route exact path="/*" component={NotFound} something="foo" />
</Switch>
</div>
</Router>
</div>
)
handleLogout = () => {
this.props.logoutUser();
}
Here, first one is as soon as I log In success.
So, In login success I have written like ,
history.push('/'); then it redirects to the LandingScreen Component.
Now, I do have one dropdown, on change of that I am adding :job param in the route which is like ,
onchange ,
history.push({
pathname: "/" + `${jdId}`
});
So It again rerenders the LandingScreen component.
Now, on click of the logout button,
I want to redirect the use to the login page that is /login.
So, on click of logout what I do is ,
localStorage.clear();
history.push('/');
so with this it is not rendering the LoginComponent and also route does not get changes ,
But If I remove the :job? from the route it redirects to the login I mean renders the login component.
Can any one help me with this ?
javascript reactjs redux react-redux
asked Nov 26 '18 at 9:33
ganeshganesh
22119
I am new to the react js . Now , Here, what I have is a private Route.
const PrivateRoute = ({ component: Component, isFetching, hasUserLogIn, path, ...rest }) => {
hasUserLogIn = localStorage.getItem("access_token");
if (hasUserLogIn !== undefined && hasUserLogIn !== null) {
hasUserLogIn = true;
} else {
hasUserLogIn = false;
}
console.log("hasUserLogIn",hasUserLogIn);
return hasUserLogIn ?
(
<Route
{...rest}
path={path}
component={Component}
/>
)
:
(
<Redirect
to={{
pathname: "/login",
state: { from: path }
}}
/>
)
};
<div>
<Router history={history}>
<div>
{this.props.isFetching && <Loading />}
<Switch>
<PrivateRoute exact path="/:job?" component={LandingScreen} />
<PrivateRoute exact path="/quiz-setup/:job" component={QuizSetupMain} />
<PrivateRoute exact path="/quiz-questions" component={FetchedQuestionComponent} />
<Route exact path="/login" component={LoginComponent} />
<Route exact path="/*" component={NotFound} something="foo" />
</Switch>
</div>
</Router>
</div>
)
handleLogout = () => {
this.props.logoutUser();
}
Here, first one is as soon as I log In success.
So, In login success I have written like ,
history.push('/'); then it redirects to the LandingScreen Component.
Now, I do have one dropdown, on change of that I am adding :job param in the route which is like ,
onchange ,
history.push({
pathname: "/" + `${jdId}`
});
So It again rerenders the LandingScreen component.
Now, on click of the logout button,
I want to redirect the use to the login page that is /login.
So, on click of logout what I do is ,
localStorage.clear();
history.push('/');
so with this it is not rendering the LoginComponent and also route does not get changes ,
But If I remove the :job? from the route it redirects to the login I mean renders the login component.
Can any one help me with this ?
javascript reactjs redux react-redux
javascript reactjs redux react-redux
asked Nov 26 '18 at 9:33
ganeshganesh
22119
asked Nov 26 '18 at 9:33
ganeshganesh
22119
edited Nov 26 '18 at 9:58
ganesh
asked Nov 26 '18 at 9:33
ganeshganesh
22119
asked Nov 26 '18 at 9:33
ganeshganesh
22119
asked Nov 26 '18 at 9:33
ganeshganesh
22119
22119
1
Component where you use the logout functionality might help in finding the issue
– Shubham Khatri
Nov 26 '18 at 9:56
I have just added that method where on click logout that thing like histroy push and clear localstorage happens
– ganesh
Nov 26 '18 at 9:59
can you try removing the query parameter?from:job?
– Pranay Tripathi
Nov 26 '18 at 10:06
Can you confirm whether PrivateRoute is re-rendered on logout and also is the url changing. If url is not changing, check if there is any error on your console.
– Shubham Khatri
Nov 26 '18 at 10:08
Warning: You tried to redirect to the same route you're currently on: "/login"
– ganesh
Nov 26 '18 at 10:17
|
show 4 more comments
1
Component where you use the logout functionality might help in finding the issue
– Shubham Khatri
Nov 26 '18 at 9:56
I have just added that method where on click logout that thing like histroy push and clear localstorage happens
– ganesh
Nov 26 '18 at 9:59
can you try removing the query parameter?from:job?
– Pranay Tripathi
Nov 26 '18 at 10:06
Can you confirm whether PrivateRoute is re-rendered on logout and also is the url changing. If url is not changing, check if there is any error on your console.
– Shubham Khatri
Nov 26 '18 at 10:08
Warning: You tried to redirect to the same route you're currently on: "/login"
– ganesh
Nov 26 '18 at 10:17
1
1
Component where you use the logout functionality might help in finding the issue
– Shubham Khatri
Nov 26 '18 at 9:56
Component where you use the logout functionality might help in finding the issue
– Shubham Khatri
Nov 26 '18 at 9:56
I have just added that method where on click logout that thing like histroy push and clear localstorage happens
– ganesh
Nov 26 '18 at 9:59
I have just added that method where on click logout that thing like histroy push and clear localstorage happens
– ganesh
Nov 26 '18 at 9:59
can you try removing the query parameter
? from :job?– Pranay Tripathi
Nov 26 '18 at 10:06
can you try removing the query parameter
? from :job?– Pranay Tripathi
Nov 26 '18 at 10:06
Can you confirm whether PrivateRoute is re-rendered on logout and also is the url changing. If url is not changing, check if there is any error on your console.
– Shubham Khatri
Nov 26 '18 at 10:08
Can you confirm whether PrivateRoute is re-rendered on logout and also is the url changing. If url is not changing, check if there is any error on your console.
– Shubham Khatri
Nov 26 '18 at 10:08
Warning: You tried to redirect to the same route you're currently on: "/login"
– ganesh
Nov 26 '18 at 10:17
Warning: You tried to redirect to the same route you're currently on: "/login"
– ganesh
Nov 26 '18 at 10:17
|
show 4 more comments
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%2f53478178%2flogin-route-is-not-getting-renderd-on-logout-react%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%2f53478178%2flogin-route-is-not-getting-renderd-on-logout-react%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
1
Component where you use the logout functionality might help in finding the issue
– Shubham Khatri
Nov 26 '18 at 9:56
I have just added that method where on click logout that thing like histroy push and clear localstorage happens
– ganesh
Nov 26 '18 at 9:59
can you try removing the query parameter
?from:job?– Pranay Tripathi
Nov 26 '18 at 10:06
Can you confirm whether PrivateRoute is re-rendered on logout and also is the url changing. If url is not changing, check if there is any error on your console.
– Shubham Khatri
Nov 26 '18 at 10:08
Warning: You tried to redirect to the same route you're currently on: "/login"
– ganesh
Nov 26 '18 at 10:17