Reactjs routing to home page after login success
1
I have created a login page and after successful login I want to move to home page.
I have created a Router in App.js file
class App extends Component {
render() {
return (
<div>
<Header />
<BrowserRouter>
<Switch>
<Route path="/" component={ Login } exact/>
<Route path="/login" component={ Home }/>
<Route component={ Error }/>
</Switch>
</BrowserRouter>
<Footer />
</div>
);
}
}
then in UserLogin component I am using fetch method for login after success response
return fetch('http://localhost:6020/login',
{
headers:{
"Accept": "application/json",
"Content-Type": "application/json"
},
method:'POST',
body:JSON.stringify(user)
}
).then(response => response.json())
.then(function(data){
console.log(data.error);
if(data.error===null){
return <Redirect to='/login' />
}
else{
console.log("not working");
}
});
In above code I user <Redirect to='/login' /> by importing Redirect from react-router-dom still does nothing no error log nothing.
I just want to show home page after success login
reactjs
asked Nov 22 '18 at 10:01
KramerKramer
9013
add a comment |
1
I have created a login page and after successful login I want to move to home page.
I have created a Router in App.js file
class App extends Component {
render() {
return (
<div>
<Header />
<BrowserRouter>
<Switch>
<Route path="/" component={ Login } exact/>
<Route path="/login" component={ Home }/>
<Route component={ Error }/>
</Switch>
</BrowserRouter>
<Footer />
</div>
);
}
}
then in UserLogin component I am using fetch method for login after success response
return fetch('http://localhost:6020/login',
{
headers:{
"Accept": "application/json",
"Content-Type": "application/json"
},
method:'POST',
body:JSON.stringify(user)
}
).then(response => response.json())
.then(function(data){
console.log(data.error);
if(data.error===null){
return <Redirect to='/login' />
}
else{
console.log("not working");
}
});
In above code I user <Redirect to='/login' /> by importing Redirect from react-router-dom still does nothing no error log nothing.
I just want to show home page after success login
reactjs
asked Nov 22 '18 at 10:01
KramerKramer
9013
Show full code, how you are calling this fetch and where you are using it.
– Just code
Nov 22 '18 at 10:03
justwindow.location.href = /I assume the / is the path to your home page
– Nedko Dimitrov
Nov 22 '18 at 10:06
are you sure thatdata.error === nulland it is notundefinedI meannull !== undefined
– Nedko Dimitrov
Nov 22 '18 at 10:13
add a comment |
1
1
1
I have created a login page and after successful login I want to move to home page.
I have created a Router in App.js file
class App extends Component {
render() {
return (
<div>
<Header />
<BrowserRouter>
<Switch>
<Route path="/" component={ Login } exact/>
<Route path="/login" component={ Home }/>
<Route component={ Error }/>
</Switch>
</BrowserRouter>
<Footer />
</div>
);
}
}
then in UserLogin component I am using fetch method for login after success response
return fetch('http://localhost:6020/login',
{
headers:{
"Accept": "application/json",
"Content-Type": "application/json"
},
method:'POST',
body:JSON.stringify(user)
}
).then(response => response.json())
.then(function(data){
console.log(data.error);
if(data.error===null){
return <Redirect to='/login' />
}
else{
console.log("not working");
}
});
In above code I user <Redirect to='/login' /> by importing Redirect from react-router-dom still does nothing no error log nothing.
I just want to show home page after success login
reactjs
asked Nov 22 '18 at 10:01
KramerKramer
9013
I have created a login page and after successful login I want to move to home page.
I have created a Router in App.js file
class App extends Component {
render() {
return (
<div>
<Header />
<BrowserRouter>
<Switch>
<Route path="/" component={ Login } exact/>
<Route path="/login" component={ Home }/>
<Route component={ Error }/>
</Switch>
</BrowserRouter>
<Footer />
</div>
);
}
}
then in UserLogin component I am using fetch method for login after success response
return fetch('http://localhost:6020/login',
{
headers:{
"Accept": "application/json",
"Content-Type": "application/json"
},
method:'POST',
body:JSON.stringify(user)
}
).then(response => response.json())
.then(function(data){
console.log(data.error);
if(data.error===null){
return <Redirect to='/login' />
}
else{
console.log("not working");
}
});
In above code I user <Redirect to='/login' /> by importing Redirect from react-router-dom still does nothing no error log nothing.
I just want to show home page after success login
reactjs
reactjs
asked Nov 22 '18 at 10:01
KramerKramer
9013
asked Nov 22 '18 at 10:01
KramerKramer
9013
asked Nov 22 '18 at 10:01
KramerKramer
9013
asked Nov 22 '18 at 10:01
KramerKramer
9013
asked Nov 22 '18 at 10:01
KramerKramer
9013
9013
Show full code, how you are calling this fetch and where you are using it.
– Just code
Nov 22 '18 at 10:03
justwindow.location.href = /I assume the / is the path to your home page
– Nedko Dimitrov
Nov 22 '18 at 10:06
are you sure thatdata.error === nulland it is notundefinedI meannull !== undefined
– Nedko Dimitrov
Nov 22 '18 at 10:13
add a comment |
Show full code, how you are calling this fetch and where you are using it.
– Just code
Nov 22 '18 at 10:03
justwindow.location.href = /I assume the / is the path to your home page
– Nedko Dimitrov
Nov 22 '18 at 10:06
are you sure thatdata.error === nulland it is notundefinedI meannull !== undefined
– Nedko Dimitrov
Nov 22 '18 at 10:13
Show full code, how you are calling this fetch and where you are using it.
– Just code
Nov 22 '18 at 10:03
Show full code, how you are calling this fetch and where you are using it.
– Just code
Nov 22 '18 at 10:03
just
window.location.href = / I assume the / is the path to your home page– Nedko Dimitrov
Nov 22 '18 at 10:06
just
window.location.href = / I assume the / is the path to your home page– Nedko Dimitrov
Nov 22 '18 at 10:06
are you sure that
data.error === null and it is not undefined I mean null !== undefined– Nedko Dimitrov
Nov 22 '18 at 10:13
are you sure that
data.error === null and it is not undefined I mean null !== undefined– Nedko Dimitrov
Nov 22 '18 at 10:13
add a comment |
2 Answers
2
active
oldest
votes
1
try
if(data.error===null){
window.location.href = '/login'
}
answered Nov 22 '18 at 10:08
Nedko DimitrovNedko Dimitrov
523615
Won't that make a server request? I believe the OP needs to do it via client side routing.
– anuragb26
Nov 22 '18 at 10:17
@anuragb26 it is not necessary, the job of the router is to overwrite the requests
– Nedko Dimitrov
Nov 22 '18 at 10:21
this one worked but if you see charlie's answer I guess I have seen somewhere that too.....But it says Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:27
@Plootus this is thereact-routerway of doing the redirect. But you need to create your component withwithRouter()function which passes props to your component. I am not sure exactly whyreact-routeris doing that, but behind the screens there is not other way to redirect a page in JS thanwindow.location.href
– Nedko Dimitrov
Nov 22 '18 at 10:51
@Plootus probably is because ofreact-nativethere is no browser history inside a native app and redirect needs to be handled differently.
– Nedko Dimitrov
Nov 22 '18 at 10:56
|
show 2 more comments
0
if (!data.error){
this.props.history.push('/')
}
Does this work?
answered Nov 22 '18 at 10:10
CharlieCharlie
19919
Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:26
ok got it actually it is a class component there probably this is a reason this props is not working
– Kramer
Nov 22 '18 at 10:28
add a comment |
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
});
}
});
draft saved
draft discarded
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%2f53428360%2freactjs-routing-to-home-page-after-login-success%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
try
if(data.error===null){
window.location.href = '/login'
}
answered Nov 22 '18 at 10:08
Nedko DimitrovNedko Dimitrov
523615
Won't that make a server request? I believe the OP needs to do it via client side routing.
– anuragb26
Nov 22 '18 at 10:17
@anuragb26 it is not necessary, the job of the router is to overwrite the requests
– Nedko Dimitrov
Nov 22 '18 at 10:21
this one worked but if you see charlie's answer I guess I have seen somewhere that too.....But it says Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:27
@Plootus this is thereact-routerway of doing the redirect. But you need to create your component withwithRouter()function which passes props to your component. I am not sure exactly whyreact-routeris doing that, but behind the screens there is not other way to redirect a page in JS thanwindow.location.href
– Nedko Dimitrov
Nov 22 '18 at 10:51
@Plootus probably is because ofreact-nativethere is no browser history inside a native app and redirect needs to be handled differently.
– Nedko Dimitrov
Nov 22 '18 at 10:56
|
show 2 more comments
1
try
if(data.error===null){
window.location.href = '/login'
}
answered Nov 22 '18 at 10:08
Nedko DimitrovNedko Dimitrov
523615
Won't that make a server request? I believe the OP needs to do it via client side routing.
– anuragb26
Nov 22 '18 at 10:17
@anuragb26 it is not necessary, the job of the router is to overwrite the requests
– Nedko Dimitrov
Nov 22 '18 at 10:21
this one worked but if you see charlie's answer I guess I have seen somewhere that too.....But it says Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:27
@Plootus this is thereact-routerway of doing the redirect. But you need to create your component withwithRouter()function which passes props to your component. I am not sure exactly whyreact-routeris doing that, but behind the screens there is not other way to redirect a page in JS thanwindow.location.href
– Nedko Dimitrov
Nov 22 '18 at 10:51
@Plootus probably is because ofreact-nativethere is no browser history inside a native app and redirect needs to be handled differently.
– Nedko Dimitrov
Nov 22 '18 at 10:56
|
show 2 more comments
1
1
1
try
if(data.error===null){
window.location.href = '/login'
}
answered Nov 22 '18 at 10:08
Nedko DimitrovNedko Dimitrov
523615
try
if(data.error===null){
window.location.href = '/login'
}
answered Nov 22 '18 at 10:08
Nedko DimitrovNedko Dimitrov
523615
answered Nov 22 '18 at 10:08
Nedko DimitrovNedko Dimitrov
523615
answered Nov 22 '18 at 10:08
Nedko DimitrovNedko Dimitrov
523615
answered Nov 22 '18 at 10:08
Nedko DimitrovNedko Dimitrov
523615
523615
Won't that make a server request? I believe the OP needs to do it via client side routing.
– anuragb26
Nov 22 '18 at 10:17
@anuragb26 it is not necessary, the job of the router is to overwrite the requests
– Nedko Dimitrov
Nov 22 '18 at 10:21
this one worked but if you see charlie's answer I guess I have seen somewhere that too.....But it says Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:27
@Plootus this is thereact-routerway of doing the redirect. But you need to create your component withwithRouter()function which passes props to your component. I am not sure exactly whyreact-routeris doing that, but behind the screens there is not other way to redirect a page in JS thanwindow.location.href
– Nedko Dimitrov
Nov 22 '18 at 10:51
@Plootus probably is because ofreact-nativethere is no browser history inside a native app and redirect needs to be handled differently.
– Nedko Dimitrov
Nov 22 '18 at 10:56
|
show 2 more comments
Won't that make a server request? I believe the OP needs to do it via client side routing.
– anuragb26
Nov 22 '18 at 10:17
@anuragb26 it is not necessary, the job of the router is to overwrite the requests
– Nedko Dimitrov
Nov 22 '18 at 10:21
this one worked but if you see charlie's answer I guess I have seen somewhere that too.....But it says Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:27
@Plootus this is thereact-routerway of doing the redirect. But you need to create your component withwithRouter()function which passes props to your component. I am not sure exactly whyreact-routeris doing that, but behind the screens there is not other way to redirect a page in JS thanwindow.location.href
– Nedko Dimitrov
Nov 22 '18 at 10:51
@Plootus probably is because ofreact-nativethere is no browser history inside a native app and redirect needs to be handled differently.
– Nedko Dimitrov
Nov 22 '18 at 10:56
Won't that make a server request? I believe the OP needs to do it via client side routing.
– anuragb26
Nov 22 '18 at 10:17
Won't that make a server request? I believe the OP needs to do it via client side routing.
– anuragb26
Nov 22 '18 at 10:17
@anuragb26 it is not necessary, the job of the router is to overwrite the requests
– Nedko Dimitrov
Nov 22 '18 at 10:21
@anuragb26 it is not necessary, the job of the router is to overwrite the requests
– Nedko Dimitrov
Nov 22 '18 at 10:21
this one worked but if you see charlie's answer I guess I have seen somewhere that too.....But it says Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:27
this one worked but if you see charlie's answer I guess I have seen somewhere that too.....But it says Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:27
@Plootus this is the
react-router way of doing the redirect. But you need to create your component with withRouter() function which passes props to your component. I am not sure exactly why react-router is doing that, but behind the screens there is not other way to redirect a page in JS than window.location.href– Nedko Dimitrov
Nov 22 '18 at 10:51
@Plootus this is the
react-router way of doing the redirect. But you need to create your component with withRouter() function which passes props to your component. I am not sure exactly why react-router is doing that, but behind the screens there is not other way to redirect a page in JS than window.location.href– Nedko Dimitrov
Nov 22 '18 at 10:51
@Plootus probably is because of
react-native there is no browser history inside a native app and redirect needs to be handled differently.– Nedko Dimitrov
Nov 22 '18 at 10:56
@Plootus probably is because of
react-native there is no browser history inside a native app and redirect needs to be handled differently.– Nedko Dimitrov
Nov 22 '18 at 10:56
|
show 2 more comments
0
if (!data.error){
this.props.history.push('/')
}
Does this work?
answered Nov 22 '18 at 10:10
CharlieCharlie
19919
Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:26
ok got it actually it is a class component there probably this is a reason this props is not working
– Kramer
Nov 22 '18 at 10:28
add a comment |
0
if (!data.error){
this.props.history.push('/')
}
Does this work?
answered Nov 22 '18 at 10:10
CharlieCharlie
19919
Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:26
ok got it actually it is a class component there probably this is a reason this props is not working
– Kramer
Nov 22 '18 at 10:28
add a comment |
0
0
0
if (!data.error){
this.props.history.push('/')
}
Does this work?
answered Nov 22 '18 at 10:10
CharlieCharlie
19919
if (!data.error){
this.props.history.push('/')
}
Does this work?
answered Nov 22 '18 at 10:10
CharlieCharlie
19919
answered Nov 22 '18 at 10:10
CharlieCharlie
19919
answered Nov 22 '18 at 10:10
CharlieCharlie
19919
answered Nov 22 '18 at 10:10
CharlieCharlie
19919
19919
Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:26
ok got it actually it is a class component there probably this is a reason this props is not working
– Kramer
Nov 22 '18 at 10:28
add a comment |
Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:26
ok got it actually it is a class component there probably this is a reason this props is not working
– Kramer
Nov 22 '18 at 10:28
Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:26
Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
– Kramer
Nov 22 '18 at 10:26
ok got it actually it is a class component there probably this is a reason this props is not working
– Kramer
Nov 22 '18 at 10:28
ok got it actually it is a class component there probably this is a reason this props is not working
– Kramer
Nov 22 '18 at 10:28
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53428360%2freactjs-routing-to-home-page-after-login-success%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
Show full code, how you are calling this fetch and where you are using it.
– Just code
Nov 22 '18 at 10:03
just
window.location.href = /I assume the / is the path to your home page– Nedko Dimitrov
Nov 22 '18 at 10:06
are you sure that
data.error === nulland it is notundefinedI meannull !== undefined– Nedko Dimitrov
Nov 22 '18 at 10:13