How to redirect to another view in React - node.js

Question

Im developing an app where I need to login and after click tha Login button I need to redirect to another view that is in another layout, I've tried using this.props.history.push("/Inicio") to redirect when the Login is succesful. In this case this is the path.
{
path: "/Inicio",
name: "Inicio",
component: Inicio,
layout: "/admin"
},
This is the entire code
import React, { Component } from "react";
import {
Grid,
Col
} from "react-bootstrap";
import { Card } from "components/Card/Card.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import Button from "components/CustomButton/CustomButton.jsx";
class Login extends Component {
constructor(props) {
super(props)
this.state = {
users: [],
user: '',
pass: '',
msg: '',
apiResponse:''
}
this.logChange = this.logChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit(event) {
event.preventDefault()
var data = {
user: this.state.user,
pass: this.state.pass,
msg: this.state.msg,
apiResponse: this.state.apiResponse
}
console.log(data)
fetch("http://localhost:9000/log/Login", {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
}).then(function(response) {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
}).then((data) => {
if(data == "success"){
console.log(data)
this.setState({users: data});
this.props.history.push("/Inicio");
window.location.reload();
}
else{
if(data == 'El usuario o la contraseña no coinciden'){
this.setState({ apiResponse: data })
}
}
}).catch(function(err) {
console.log(err)
});
}
logChange(e) {
this.setState({[e.target.name]: e.target.value});
}
render() {
return (
<div className="content">
<p class="col-md-4"></p>
<Grid >
<Col md={5}>
<Card
title="Login"
content={
<form method='POST' onSubmit= {this.handleSubmit}>
<p class="col-md-2"></p>
<FormInputs
ncols={["col-md-7"]}
properties={[
{
label: "Usuario",
type: "text",
bsClass: "form-control",
placeholder: "Usuario",
maxlength: 20 ,
name: "user",
onChange: this.logChange
}
]}
/>
<p class="col-md-2"></p>
<FormInputs
ncols={["col-md-7"]}
properties={[
{
label: "Contraseña",
type: "password",
bsClass: "form-control",
placeholder: "Contraseña",
maxlength: 20,
name: "pass",
onChange: this.logChange
}
]}
/>
<p >{this.state.apiResponse}</p>
<br/>
<br/>
<Button bsStyle="info" pullRight fill type="submit">
Login
</Button>
<Button bsStyle="info" pullLeft fill type="submit">
Olvide mi Contraseña
</Button>
</form>
}
/>
</Col>
</Grid>
</div>
);
}
}
export default Login;
but in the handleSubmit() everything is working fine except for this.props.history.push("/Inicio") because it doesn't do anything.
The index.js code
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard-react.scss?v=1.3.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";
import AdminLayout from "layouts/Admin.jsx";
import LoginLayout from "layouts/LoginLayout.jsx";
import EfoodLayout from "layouts/EFoodLayout.jsx";
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/admin" render={props => <AdminLayout {...props} />} />
<Route path="/login" render={props => <LoginLayout {...props} />} />
<Route path="/Efood" render={props => <EfoodLayout {...props} />} />
<Redirect from="/" to="/login/Login" />
</Switch>
</BrowserRouter>,
document.getElementById("root")
);
LoginLayout
import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import LoginNavbar from "components/Navbars/LoginNavbar";
import Footer from "components/Footer/Footer";
import routes from "routes.js";
class Login extends Component {
getRoutes = routes => {
return routes.map((prop, key) => {
if (prop.layout === "/login") {
return (
<Route
path={prop.layout + prop.path}
render={props => (
<prop.component
{...props}
handleClick={this.handleNotificationClick}
/>
)}
key={key}
/>
);
} else {
return null;
}
});
};
getBrandText = path => {
return "Bienvenido a E Food";
};
render() {
return (
<div className="wrapper">
<LoginNavbar
brandText={this.getBrandText(this.props.location.pathname)}
/>
<Switch>{this.getRoutes(routes)}</Switch>
<Footer />
</div>
);
}
}
export default Login;
I hope you can help me, and thanks to everyone who answer.
PD: If you need more from my code, please let me know.

Answer 1

Ok, since it's obvious the component you want to do the navigation in is a deeply nested component there are a couple options.
Prop Drilling (not recommended)
prop drilling
The cons of prop drilling is that if the right props aren't passed to begin with, or if any component along the way forgets to pass on props, then some child component won't receive what they need and it may be difficult to track down the what or why it's missing. It's more difficult to maintain as now any changes to this component necessitate needing to be concerned about every other component around it. Prop drilling is actually a react anti-pattern.
LoginLayout
Your LoginLayout component appears to consume a routes config object and dynamically render routes. It needs to pass on the route props it received from its parent. Any component between here and the Login where you want to use history.push would need to keep passing all the props down.
class Login extends Component {
getRoutes = routes => {
return routes.map((prop, key) => {
if (prop.layout === "/login") {
return (
<Route
path={prop.layout + prop.path}
render={props => (
<prop.component
{...props}
{...this.props} // <-- Pass on all props passed to this component
handleClick={this.handleNotificationClick}
/>
)}
key={key}
/>
);
} else {
return null;
}
});
};
...
render() {
return (
...
);
}
}
Use withRouter Higher Order Component (recommended)
withRouter
You can get access to the history object’s properties and the closest
<Route>'s match via the withRouter higher-order component. withRouter
will pass updated match, location, and history props to the wrapped
component whenever it renders.
import React, { Component } from "react";
import { withRouter } from 'react-router-dom'; // <-- import HOC
import { Grid, Col } from "react-bootstrap";
import { Card } from "components/Card/Card.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import Button from "components/CustomButton/CustomButton.jsx";
class Login extends Component {
constructor(props) {
...
}
handleSubmit(event) {
event.preventDefault();
var data = {
user: this.state.user,
pass: this.state.pass,
msg: this.state.msg,
apiResponse: this.state.apiResponse
};
console.log(data);
fetch("http://localhost:9000/log/Login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
})
.then(function(response) {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
})
.then(data => {
if (data == "success") {
console.log(data);
this.setState({ users: data });
this.props.history.push("/Inicio"); // <-- history prop should now exist
window.location.reload();
} else {
if (data == "El usuario o la contraseña no coinciden") {
this.setState({ apiResponse: data });
}
}
})
.catch(function(err) {
console.log(err);
});
}
logChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
render() {
return (
<div className="content">
...
</div>
);
}
}
export default withRouter(Login); // <-- decorate Login with HOC

Answer 2

Are you using react-router-dom to handle your routing ? If so, you can use the hooks to navigate.
import { useHistory } from "react-router-dom";
...
const history = useHistory()
...
history.push('/Inicio')
Note that this will only work with React version >= 16.8
The reason why your code is not working is because of the bindings.
When using this.props.history.push("/Inicio"), this refers to the function you're in, not to the Component history.
If you want to keep your code that way, you can simply turn your function into an arrow function:
.then((data) => {
if(data == "success"){
console.log(data)
self.setState({users: data});
**this.props.history.push("/Inicio")** // now this will be correct
**window.location.reload();** // no need, react handles the reload
}
else{
if(data == 'El usuario o la contraseña no coinciden'){
self.setState({ apiResponse: data })
}
}
Although, I'd strongly advise using the latest features of react (check the hooks, it's really useful).