React + Redux best practice for router redirecting on redux state change
I'm using react-router-dom and I'm trying to bind it with redux. I want to redirect in action, but don't know, what the best way to do this. Am I need to using history.push() or something else? Maybe react has native approaches for this?
My code with Component container:
class ConnectedAppContent extends React.Component {
render() {
return (
<div id="content">
<Router>
<Switch>
<PropsRoute path="/login" component={LoginForm} doLogin={this.props.doLogin} />
<PrivateRoute path="/scan" redirectTo="/login" component={Scanner} token={this.props.token} />
<PrivateRoute path="/result" redirectTo="/login" component={ParsedQRCode} token={this.props.token} />
</Switch>
</Router>
</div>
);
}
}
const mapStateToProps = state => {
return {
token: state.token,
parsedQRCode: state.parsedQRCode
}
}
const mapDispatchToProps = dispatch => ({
doLogin: token => dispatch(doLogin(token))
});
export const AppContent = connect(mapStateToProps, mapDispatchToProps)(ConnectedAppContent);
javascript reactjs redux react-redux react-router
asked Nov 13 '18 at 14:07
Sergio IvanuzzoSergio Ivanuzzo
1,05631137
add a comment |
I'm using react-router-dom and I'm trying to bind it with redux. I want to redirect in action, but don't know, what the best way to do this. Am I need to using history.push() or something else? Maybe react has native approaches for this?
My code with Component container:
class ConnectedAppContent extends React.Component {
render() {
return (
<div id="content">
<Router>
<Switch>
<PropsRoute path="/login" component={LoginForm} doLogin={this.props.doLogin} />
<PrivateRoute path="/scan" redirectTo="/login" component={Scanner} token={this.props.token} />
<PrivateRoute path="/result" redirectTo="/login" component={ParsedQRCode} token={this.props.token} />
</Switch>
</Router>
</div>
);
}
}
const mapStateToProps = state => {
return {
token: state.token,
parsedQRCode: state.parsedQRCode
}
}
const mapDispatchToProps = dispatch => ({
doLogin: token => dispatch(doLogin(token))
});
export const AppContent = connect(mapStateToProps, mapDispatchToProps)(ConnectedAppContent);
javascript reactjs redux react-redux react-router
asked Nov 13 '18 at 14:07
Sergio IvanuzzoSergio Ivanuzzo
1,05631137
add a comment |
I'm using react-router-dom and I'm trying to bind it with redux. I want to redirect in action, but don't know, what the best way to do this. Am I need to using history.push() or something else? Maybe react has native approaches for this?
My code with Component container:
class ConnectedAppContent extends React.Component {
render() {
return (
<div id="content">
<Router>
<Switch>
<PropsRoute path="/login" component={LoginForm} doLogin={this.props.doLogin} />
<PrivateRoute path="/scan" redirectTo="/login" component={Scanner} token={this.props.token} />
<PrivateRoute path="/result" redirectTo="/login" component={ParsedQRCode} token={this.props.token} />
</Switch>
</Router>
</div>
);
}
}
const mapStateToProps = state => {
return {
token: state.token,
parsedQRCode: state.parsedQRCode
}
}
const mapDispatchToProps = dispatch => ({
doLogin: token => dispatch(doLogin(token))
});
export const AppContent = connect(mapStateToProps, mapDispatchToProps)(ConnectedAppContent);
javascript reactjs redux react-redux react-router
asked Nov 13 '18 at 14:07
Sergio IvanuzzoSergio Ivanuzzo
1,05631137
I'm using react-router-dom and I'm trying to bind it with redux. I want to redirect in action, but don't know, what the best way to do this. Am I need to using history.push() or something else? Maybe react has native approaches for this?
My code with Component container:
class ConnectedAppContent extends React.Component {
render() {
return (
<div id="content">
<Router>
<Switch>
<PropsRoute path="/login" component={LoginForm} doLogin={this.props.doLogin} />
<PrivateRoute path="/scan" redirectTo="/login" component={Scanner} token={this.props.token} />
<PrivateRoute path="/result" redirectTo="/login" component={ParsedQRCode} token={this.props.token} />
</Switch>
</Router>
</div>
);
}
}
const mapStateToProps = state => {
return {
token: state.token,
parsedQRCode: state.parsedQRCode
}
}
const mapDispatchToProps = dispatch => ({
doLogin: token => dispatch(doLogin(token))
});
export const AppContent = connect(mapStateToProps, mapDispatchToProps)(ConnectedAppContent);
javascript reactjs redux react-redux react-router
javascript reactjs redux react-redux react-router
asked Nov 13 '18 at 14:07
Sergio IvanuzzoSergio Ivanuzzo
1,05631137
asked Nov 13 '18 at 14:07
Sergio IvanuzzoSergio Ivanuzzo
1,05631137
asked Nov 13 '18 at 14:07
Sergio IvanuzzoSergio Ivanuzzo
1,05631137
asked Nov 13 '18 at 14:07
Sergio IvanuzzoSergio Ivanuzzo
1,05631137
asked Nov 13 '18 at 14:07
Sergio IvanuzzoSergio Ivanuzzo
1,05631137
1,05631137
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
I would
import {Redirect} from 'react-router-dom';
and in the render method you can:
render() {
if (yourRedirectState) {
return <Redirect to='/route'/>;
}
}
answered Nov 13 '18 at 14:31
charly1212charly1212
13518
add a comment |
If you want to route to particular path on some event as button click or submit, you can use Redirect or Link which are provided by react-router-dom.
Also, react-router works with redux , but in some cases it doesn't and you can wrap your component with the withRouter and then you can easily push the route with following:
history.push('/your-route')
answered Nov 13 '18 at 14:27
Krina SoniKrina Soni
34515
add a comment |
I don't know of any other approaches but history.push() will work
const stateChange = () => {
this.props.doLogin();
this.props.history.push("/routetoredirect")
}
answered Nov 13 '18 at 14:23
DmitriyDmitriy
490212
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
});
}
});
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%2f53282837%2freact-redux-best-practice-for-router-redirecting-on-redux-state-change%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
I would
import {Redirect} from 'react-router-dom';
and in the render method you can:
render() {
if (yourRedirectState) {
return <Redirect to='/route'/>;
}
}
answered Nov 13 '18 at 14:31
charly1212charly1212
13518
add a comment |
I would
import {Redirect} from 'react-router-dom';
and in the render method you can:
render() {
if (yourRedirectState) {
return <Redirect to='/route'/>;
}
}
answered Nov 13 '18 at 14:31
charly1212charly1212
13518
add a comment |
I would
import {Redirect} from 'react-router-dom';
and in the render method you can:
render() {
if (yourRedirectState) {
return <Redirect to='/route'/>;
}
}
answered Nov 13 '18 at 14:31
charly1212charly1212
13518
I would
import {Redirect} from 'react-router-dom';
and in the render method you can:
render() {
if (yourRedirectState) {
return <Redirect to='/route'/>;
}
}
answered Nov 13 '18 at 14:31
charly1212charly1212
13518
answered Nov 13 '18 at 14:31
charly1212charly1212
13518
answered Nov 13 '18 at 14:31
charly1212charly1212
13518
answered Nov 13 '18 at 14:31
charly1212charly1212
13518
13518
add a comment |
add a comment |
If you want to route to particular path on some event as button click or submit, you can use Redirect or Link which are provided by react-router-dom.
Also, react-router works with redux , but in some cases it doesn't and you can wrap your component with the withRouter and then you can easily push the route with following:
history.push('/your-route')
answered Nov 13 '18 at 14:27
Krina SoniKrina Soni
34515
add a comment |
If you want to route to particular path on some event as button click or submit, you can use Redirect or Link which are provided by react-router-dom.
Also, react-router works with redux , but in some cases it doesn't and you can wrap your component with the withRouter and then you can easily push the route with following:
history.push('/your-route')
answered Nov 13 '18 at 14:27
Krina SoniKrina Soni
34515
add a comment |
If you want to route to particular path on some event as button click or submit, you can use Redirect or Link which are provided by react-router-dom.
Also, react-router works with redux , but in some cases it doesn't and you can wrap your component with the withRouter and then you can easily push the route with following:
history.push('/your-route')
answered Nov 13 '18 at 14:27
Krina SoniKrina Soni
34515
If you want to route to particular path on some event as button click or submit, you can use Redirect or Link which are provided by react-router-dom.
Also, react-router works with redux , but in some cases it doesn't and you can wrap your component with the withRouter and then you can easily push the route with following:
history.push('/your-route')
answered Nov 13 '18 at 14:27
Krina SoniKrina Soni
34515
answered Nov 13 '18 at 14:27
Krina SoniKrina Soni
34515
answered Nov 13 '18 at 14:27
Krina SoniKrina Soni
34515
answered Nov 13 '18 at 14:27
Krina SoniKrina Soni
34515
34515
add a comment |
add a comment |
I don't know of any other approaches but history.push() will work
const stateChange = () => {
this.props.doLogin();
this.props.history.push("/routetoredirect")
}
answered Nov 13 '18 at 14:23
DmitriyDmitriy
490212
add a comment |
I don't know of any other approaches but history.push() will work
const stateChange = () => {
this.props.doLogin();
this.props.history.push("/routetoredirect")
}
answered Nov 13 '18 at 14:23
DmitriyDmitriy
490212
add a comment |
I don't know of any other approaches but history.push() will work
const stateChange = () => {
this.props.doLogin();
this.props.history.push("/routetoredirect")
}
answered Nov 13 '18 at 14:23
DmitriyDmitriy
490212
I don't know of any other approaches but history.push() will work
const stateChange = () => {
this.props.doLogin();
this.props.history.push("/routetoredirect")
}
answered Nov 13 '18 at 14:23
DmitriyDmitriy
490212
answered Nov 13 '18 at 14:23
DmitriyDmitriy
490212
answered Nov 13 '18 at 14:23
DmitriyDmitriy
490212
answered Nov 13 '18 at 14:23
DmitriyDmitriy
490212
490212
add a comment |
add a comment |
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%2f53282837%2freact-redux-best-practice-for-router-redirecting-on-redux-state-change%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
