Mixing
React Router - Auth check renders blank page
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm fairly new to React Router. I'm trying to implement an Auth check when the app runs as answered here: How to implement authenticated routes in React Router 4?. If logged in it should load the dashboard component, if not you should get redirected to the login screen.
The redirect does not work, it's just a blank page.
Any ideas?
export default class App extends React.Component {
state = {
auth: false
};
updateAuth = value => {
this.setState({
auth: value
});
};
render() {
const { auth } = this.state;
console.log(auth);
const PrivateRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={props =>
auth ? (
<Component {...rest} />
) : (
<Redirect
to={{ pathname: "/login", state: { from: props.location } }}
/>
)
}
/>
);
};
return (
<Router>
<div>
<Route path="/login" component={Login} auth={this.updateAuth} />
<PrivateRoute path="/dashboard" component={Dashboard} />
</div>
</Router>
);
}
}
https://codesandbox.io/s/rj6pqkw7xq
reactjs react-router-v4
asked Jan 3 at 15:14
Paul RedmondPaul Redmond
2,44411535
add a comment |
I'm fairly new to React Router. I'm trying to implement an Auth check when the app runs as answered here: How to implement authenticated routes in React Router 4?. If logged in it should load the dashboard component, if not you should get redirected to the login screen.
The redirect does not work, it's just a blank page.
Any ideas?
export default class App extends React.Component {
state = {
auth: false
};
updateAuth = value => {
this.setState({
auth: value
});
};
render() {
const { auth } = this.state;
console.log(auth);
const PrivateRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={props =>
auth ? (
<Component {...rest} />
) : (
<Redirect
to={{ pathname: "/login", state: { from: props.location } }}
/>
)
}
/>
);
};
return (
<Router>
<div>
<Route path="/login" component={Login} auth={this.updateAuth} />
<PrivateRoute path="/dashboard" component={Dashboard} />
</div>
</Router>
);
}
}
https://codesandbox.io/s/rj6pqkw7xq
reactjs react-router-v4
asked Jan 3 at 15:14
Paul RedmondPaul Redmond
2,44411535
add a comment |
I'm fairly new to React Router. I'm trying to implement an Auth check when the app runs as answered here: How to implement authenticated routes in React Router 4?. If logged in it should load the dashboard component, if not you should get redirected to the login screen.
The redirect does not work, it's just a blank page.
Any ideas?
export default class App extends React.Component {
state = {
auth: false
};
updateAuth = value => {
this.setState({
auth: value
});
};
render() {
const { auth } = this.state;
console.log(auth);
const PrivateRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={props =>
auth ? (
<Component {...rest} />
) : (
<Redirect
to={{ pathname: "/login", state: { from: props.location } }}
/>
)
}
/>
);
};
return (
<Router>
<div>
<Route path="/login" component={Login} auth={this.updateAuth} />
<PrivateRoute path="/dashboard" component={Dashboard} />
</div>
</Router>
);
}
}
https://codesandbox.io/s/rj6pqkw7xq
reactjs react-router-v4
asked Jan 3 at 15:14
Paul RedmondPaul Redmond
2,44411535
I'm fairly new to React Router. I'm trying to implement an Auth check when the app runs as answered here: How to implement authenticated routes in React Router 4?. If logged in it should load the dashboard component, if not you should get redirected to the login screen.
The redirect does not work, it's just a blank page.
Any ideas?
export default class App extends React.Component {
state = {
auth: false
};
updateAuth = value => {
this.setState({
auth: value
});
};
render() {
const { auth } = this.state;
console.log(auth);
const PrivateRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={props =>
auth ? (
<Component {...rest} />
) : (
<Redirect
to={{ pathname: "/login", state: { from: props.location } }}
/>
)
}
/>
);
};
return (
<Router>
<div>
<Route path="/login" component={Login} auth={this.updateAuth} />
<PrivateRoute path="/dashboard" component={Dashboard} />
</div>
</Router>
);
}
}
https://codesandbox.io/s/rj6pqkw7xq
reactjs react-router-v4
reactjs react-router-v4
asked Jan 3 at 15:14
Paul RedmondPaul Redmond
2,44411535
asked Jan 3 at 15:14
Paul RedmondPaul Redmond
2,44411535
edited Jan 10 at 15:09
Paul Redmond
asked Jan 3 at 15:14
Paul RedmondPaul Redmond
2,44411535
asked Jan 3 at 15:14
Paul RedmondPaul Redmond
2,44411535
asked Jan 3 at 15:14
Paul RedmondPaul Redmond
2,44411535
2,44411535
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You still have the path attribute on the PrivateRoute set to /dashboard, if you go to https://qlj5rnnlnq.codesandbox.io/dashboard it'll attempt to load your Dashboard page, but fail because the file on the server doesn't have the .js file extension.
If you want to go to the dashboard page from the root URL, change the path to:
<PrivateRoute authed={true} path="/" component={Dashboard} />
And also change the file extension on the Dashboard file so it becomes Dashboard.js
answered Jan 3 at 15:29
dandan
846620
Ah, thanks. I fixed the file extension. Can I just redirect to /dashboard? I just want to app to verify if the user is logged in or not as so go to either /dashboard or /login
– Paul Redmond
Jan 3 at 15:54
Sure, that'd work. Just set up a redirect on the root route (i.e. path="/") and have that redirect to/dashboardand it should be picked up by the PrivateRoute you've already set up
– dan
Jan 3 at 16:08
I can't get it to work. I either get a blank page or aMaximum update depth exceeded.
– Paul Redmond
Jan 3 at 16:13
Ah I probably should have explained what I meant better. Your PrivateRoute was fine and doesn't need to be changed, you can just add another Route in your Router forpath="/"and put a redirect in there, I've made some changes here: codesandbox.io/s/2z823x2rrp
– dan
Jan 3 at 16:19
1
Okay, this works! Thanks guys.
– Paul Redmond
Jan 11 at 10:06
|
show 5 more comments
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%2f54025046%2freact-router-auth-check-renders-blank-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You still have the path attribute on the PrivateRoute set to /dashboard, if you go to https://qlj5rnnlnq.codesandbox.io/dashboard it'll attempt to load your Dashboard page, but fail because the file on the server doesn't have the .js file extension.
If you want to go to the dashboard page from the root URL, change the path to:
<PrivateRoute authed={true} path="/" component={Dashboard} />
And also change the file extension on the Dashboard file so it becomes Dashboard.js
answered Jan 3 at 15:29
dandan
846620
Ah, thanks. I fixed the file extension. Can I just redirect to /dashboard? I just want to app to verify if the user is logged in or not as so go to either /dashboard or /login
– Paul Redmond
Jan 3 at 15:54
Sure, that'd work. Just set up a redirect on the root route (i.e. path="/") and have that redirect to/dashboardand it should be picked up by the PrivateRoute you've already set up
– dan
Jan 3 at 16:08
I can't get it to work. I either get a blank page or aMaximum update depth exceeded.
– Paul Redmond
Jan 3 at 16:13
Ah I probably should have explained what I meant better. Your PrivateRoute was fine and doesn't need to be changed, you can just add another Route in your Router forpath="/"and put a redirect in there, I've made some changes here: codesandbox.io/s/2z823x2rrp
– dan
Jan 3 at 16:19
1
Okay, this works! Thanks guys.
– Paul Redmond
Jan 11 at 10:06
|
show 5 more comments
You still have the path attribute on the PrivateRoute set to /dashboard, if you go to https://qlj5rnnlnq.codesandbox.io/dashboard it'll attempt to load your Dashboard page, but fail because the file on the server doesn't have the .js file extension.
If you want to go to the dashboard page from the root URL, change the path to:
<PrivateRoute authed={true} path="/" component={Dashboard} />
And also change the file extension on the Dashboard file so it becomes Dashboard.js
answered Jan 3 at 15:29
dandan
846620
Ah, thanks. I fixed the file extension. Can I just redirect to /dashboard? I just want to app to verify if the user is logged in or not as so go to either /dashboard or /login
– Paul Redmond
Jan 3 at 15:54
Sure, that'd work. Just set up a redirect on the root route (i.e. path="/") and have that redirect to/dashboardand it should be picked up by the PrivateRoute you've already set up
– dan
Jan 3 at 16:08
I can't get it to work. I either get a blank page or aMaximum update depth exceeded.
– Paul Redmond
Jan 3 at 16:13
Ah I probably should have explained what I meant better. Your PrivateRoute was fine and doesn't need to be changed, you can just add another Route in your Router forpath="/"and put a redirect in there, I've made some changes here: codesandbox.io/s/2z823x2rrp
– dan
Jan 3 at 16:19
1
Okay, this works! Thanks guys.
– Paul Redmond
Jan 11 at 10:06
|
show 5 more comments
You still have the path attribute on the PrivateRoute set to /dashboard, if you go to https://qlj5rnnlnq.codesandbox.io/dashboard it'll attempt to load your Dashboard page, but fail because the file on the server doesn't have the .js file extension.
If you want to go to the dashboard page from the root URL, change the path to:
<PrivateRoute authed={true} path="/" component={Dashboard} />
And also change the file extension on the Dashboard file so it becomes Dashboard.js
answered Jan 3 at 15:29
dandan
846620
You still have the path attribute on the PrivateRoute set to /dashboard, if you go to https://qlj5rnnlnq.codesandbox.io/dashboard it'll attempt to load your Dashboard page, but fail because the file on the server doesn't have the .js file extension.
If you want to go to the dashboard page from the root URL, change the path to:
<PrivateRoute authed={true} path="/" component={Dashboard} />
And also change the file extension on the Dashboard file so it becomes Dashboard.js
answered Jan 3 at 15:29
dandan
846620
edited Jan 3 at 15:40
answered Jan 3 at 15:29
dandan
846620
answered Jan 3 at 15:29
dandan
846620
answered Jan 3 at 15:29
dandan
846620
846620
Ah, thanks. I fixed the file extension. Can I just redirect to /dashboard? I just want to app to verify if the user is logged in or not as so go to either /dashboard or /login
– Paul Redmond
Jan 3 at 15:54
Sure, that'd work. Just set up a redirect on the root route (i.e. path="/") and have that redirect to/dashboardand it should be picked up by the PrivateRoute you've already set up
– dan
Jan 3 at 16:08
I can't get it to work. I either get a blank page or aMaximum update depth exceeded.
– Paul Redmond
Jan 3 at 16:13
Ah I probably should have explained what I meant better. Your PrivateRoute was fine and doesn't need to be changed, you can just add another Route in your Router forpath="/"and put a redirect in there, I've made some changes here: codesandbox.io/s/2z823x2rrp
– dan
Jan 3 at 16:19
1
Okay, this works! Thanks guys.
– Paul Redmond
Jan 11 at 10:06
|
show 5 more comments
Ah, thanks. I fixed the file extension. Can I just redirect to /dashboard? I just want to app to verify if the user is logged in or not as so go to either /dashboard or /login
– Paul Redmond
Jan 3 at 15:54
Sure, that'd work. Just set up a redirect on the root route (i.e. path="/") and have that redirect to/dashboardand it should be picked up by the PrivateRoute you've already set up
– dan
Jan 3 at 16:08
I can't get it to work. I either get a blank page or aMaximum update depth exceeded.
– Paul Redmond
Jan 3 at 16:13
Ah I probably should have explained what I meant better. Your PrivateRoute was fine and doesn't need to be changed, you can just add another Route in your Router forpath="/"and put a redirect in there, I've made some changes here: codesandbox.io/s/2z823x2rrp
– dan
Jan 3 at 16:19
1
Okay, this works! Thanks guys.
– Paul Redmond
Jan 11 at 10:06
Ah, thanks. I fixed the file extension. Can I just redirect to /dashboard? I just want to app to verify if the user is logged in or not as so go to either /dashboard or /login
– Paul Redmond
Jan 3 at 15:54
Ah, thanks. I fixed the file extension. Can I just redirect to /dashboard? I just want to app to verify if the user is logged in or not as so go to either /dashboard or /login
– Paul Redmond
Jan 3 at 15:54
Sure, that'd work. Just set up a redirect on the root route (i.e. path="/") and have that redirect to
/dashboard and it should be picked up by the PrivateRoute you've already set up– dan
Jan 3 at 16:08
Sure, that'd work. Just set up a redirect on the root route (i.e. path="/") and have that redirect to
/dashboard and it should be picked up by the PrivateRoute you've already set up– dan
Jan 3 at 16:08
I can't get it to work. I either get a blank page or a
Maximum update depth exceeded.– Paul Redmond
Jan 3 at 16:13
I can't get it to work. I either get a blank page or a
Maximum update depth exceeded.– Paul Redmond
Jan 3 at 16:13
Ah I probably should have explained what I meant better. Your PrivateRoute was fine and doesn't need to be changed, you can just add another Route in your Router for
path="/" and put a redirect in there, I've made some changes here: codesandbox.io/s/2z823x2rrp– dan
Jan 3 at 16:19
Ah I probably should have explained what I meant better. Your PrivateRoute was fine and doesn't need to be changed, you can just add another Route in your Router for
path="/" and put a redirect in there, I've made some changes here: codesandbox.io/s/2z823x2rrp– dan
Jan 3 at 16:19
1
1
Okay, this works! Thanks guys.
– Paul Redmond
Jan 11 at 10:06
Okay, this works! Thanks guys.
– Paul Redmond
Jan 11 at 10:06
|
show 5 more comments
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%2f54025046%2freact-router-auth-check-renders-blank-page%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
