-
-
Save elitan/5e4cab413dc201e0598ee05287ee4338 to your computer and use it in GitHub Desktop.
import React, { Component } from 'react'; | |
import { withRouter } from 'react-router-dom'; // <--- import `withRouter`. We will use this in the bottom of our file. | |
class ContactForm extends Component { | |
submitForm (e) { | |
e.preventDefault() | |
this.props.history.push('/thank-you'); // <--- The page you want to redirect your user to. | |
} | |
render() { | |
return ( | |
<div> | |
<form onSubmit={this.submitForm.bind(this)}> | |
<button type="submit">Submit</button> | |
</form> | |
</div> | |
); | |
} | |
} | |
export default withRouter(ContactForm); // <--- make sure to wrap your component with `withRouter()` |
Thank you !!!!
Thank You Friend
Thank you!!!!
Thank you!
For functional component, it will be
props.history.push('/thank-you');
how to wrap the the contact form when you are using redux and wrapping connect already
@ArunTeltia, withRouter is a decorator and can be chained. I have a third one since I'm using redux forms. It ends up looking like this.
export default withRouter(connect(mapStateToProps, { createTrackAction })(
reduxForm({ form: "trackCreate", validate })(TrackCreate))
);
TrackCreate is my component class. Hope that helps.
@mark081 well thats something new to me i will try this Thank you for help
Hi , I have trying to navigate to other URL but it is not at all working for me. Please help me with this:
I want to navigate to /loginSuccess when email and password is correct.
import React, {useState} from "react";
import {NavLink, Redirect, withRouter} from 'react-router-dom';
import LoginSuccess from './LoginSuccess';
function Login(){
const [contact, setContact] = useState({
password : "",
email: ""
});
const [isLogin, setLogin] = useState(true);
function handleChange(event) {
const { name, value } = event.target;
setContact(prevValue => {
return {
...prevValue,
[name]: value
};
});
}
function handleSubmit(){
const getPwd = localStorage.getItem('pwd');
const getEmail = localStorage.getItem('email');
var em = document.getElementById("emailId").value;
var pwd = '"'+document.getElementById("pwdId").value+'"';
if (getEmail === em && getPwd === pwd) {
setLogin(true);
this.context.router.history.push('/loginSuccess');
}
else{
setLogin(false);
}
}
return (
<div className="container">
<h2>Signed Up Successfully!!</h2>
<h1>
Login
</h1>
<form onSubmit={handleSubmit}>
<input id="emailId" className="form-login"
onChange={handleChange}
name="email"
value={contact.email}
placeholder="Email"
/>
<input id="pwdId" className="form-login" type="password"
onChange={handleChange}
name="password"
value={contact.password}
placeholder="Password"
/>
{/* <button onClick={handleSubmit}>Login</button> */}
<input type="submit" value="Login"></input>
</form>
</div>
)
}
export default withRouter(Login);
@tanyamehta
are you having a router define for the loginsuccess in the main app
if you dont have it may now work
just add a route in the main component for my case its app component
<Route path="/loginsuccess" component={abc123}/>
I also face the problem some time ago and this resolve the issue for me
Try this
Thanks a lot .You made my day
When I try to use this example I keep getting
Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
.Code:
import React from 'react'; import ReactDOM, { render } from 'react-dom'; import PropTypes from 'prop-types'; import withStyles from 'isomorphic-style-loader/lib/withStyles'; import { graphql } from 'react-apollo'; import { withRouter } from 'react-router-dom'; import gql from 'graphql-tag'; import registerQuery from './RegisterQuery'; import s from './Register.css'; let postURL; class Register extends React.Component { constructor() { super(); this.state = { schoolName: '', userName: '', password: '' }; this.onSchoolNameChange = this.onSchoolNameChange.bind(this); this.onUserNameChange = this.onUserNameChange.bind(this); this.onPasswordChange = this.onPasswordChange.bind(this); } componentDidMount() { postURL = `${global.location.origin}/graphql`; } onSchoolNameChange(event) { this.setState({ schoolName: event.target.value }); } onUserNameChange(event) { this.setState({ userName: event.target.value }); } onPasswordChange(event) { this.setState({ password: event.target.value }); } handleSubmit(data) { e.preventDefault(); this.props.history.push('/login'); } render() { console.log(this.props); const { schoolName, userName, password } = this.state; const isEnabled = schoolName.length > 0 && userName.length > 0 && password.length > 0; return ( <div className={s.root}> <div className={s.container}> <h1>{this.props.title}</h1> <form onSubmit={this.handleSubmit.bind(this)}> <div className={s.formGroup}> <label className={s.label} htmlFor="schoolName"> School Name: <input className={s.input} id="schoolName" type="text" name="schoolName" value={this.state.schoolName} onChange={this.onSchoolNameChange} autoFocus // eslint-disable-line jsx-a11y/no-autofocus /> </label> </div> <div className={s.formGroup}> <label className={s.label} htmlFor="userName"> User Name: <input className={s.input} id="userName" type="userName" name="userName" value={this.state.userName} onChange={this.onUserNameChange} /> </label> </div> <div className={s.formGroup}> <label className={s.label} htmlFor="password"> Password: <input className={s.input} id="password" type="password" name="password" value={this.state.password} onChange={this.onPasswordChange} /> </label> </div> <div className={s.formGroup}> <button disabled={!isEnabled} className={s.button} type="submit"> Submit </button> </div> </form> </div> </div> ); } } export default graphql(registerQuery)(withStyles(s)(withRouter(Register)));
Did you resolve this issue?
Hi,
after you build a static folder with 'yarn build' or 'npm run build' on your terminal (inside your project folder),
you must make a file named '_redirects' inside 'build' folder.
then inside the '_redirects' folder, you write below:
/* /index.html 200
And go to Netlify and drag and drop your whole 'build' folder into the build site box.
It ran smoothly for me.
OMG, thank you so much!
Thank you so much!
thank you. :)
I needed this :
this.props.history.push('/thank-you'); // <--- The page you want to redirect your user to.
When I try to use this example I keep getting
Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
.Code:
import React from 'react'; import ReactDOM, { render } from 'react-dom'; import PropTypes from 'prop-types'; import withStyles from 'isomorphic-style-loader/lib/withStyles'; import { graphql } from 'react-apollo'; import { withRouter } from 'react-router-dom'; import gql from 'graphql-tag'; import registerQuery from './RegisterQuery'; import s from './Register.css'; let postURL; class Register extends React.Component { constructor() { super(); this.state = { schoolName: '', userName: '', password: '' }; this.onSchoolNameChange = this.onSchoolNameChange.bind(this); this.onUserNameChange = this.onUserNameChange.bind(this); this.onPasswordChange = this.onPasswordChange.bind(this); } componentDidMount() { postURL = `${global.location.origin}/graphql`; } onSchoolNameChange(event) { this.setState({ schoolName: event.target.value }); } onUserNameChange(event) { this.setState({ userName: event.target.value }); } onPasswordChange(event) { this.setState({ password: event.target.value }); } handleSubmit(data) { e.preventDefault(); this.props.history.push('/login'); } render() { console.log(this.props); const { schoolName, userName, password } = this.state; const isEnabled = schoolName.length > 0 && userName.length > 0 && password.length > 0; return ( <div className={s.root}> <div className={s.container}> <h1>{this.props.title}</h1> <form onSubmit={this.handleSubmit.bind(this)}> <div className={s.formGroup}> <label className={s.label} htmlFor="schoolName"> School Name: <input className={s.input} id="schoolName" type="text" name="schoolName" value={this.state.schoolName} onChange={this.onSchoolNameChange} autoFocus // eslint-disable-line jsx-a11y/no-autofocus /> </label> </div> <div className={s.formGroup}> <label className={s.label} htmlFor="userName"> User Name: <input className={s.input} id="userName" type="userName" name="userName" value={this.state.userName} onChange={this.onUserNameChange} /> </label> </div> <div className={s.formGroup}> <label className={s.label} htmlFor="password"> Password: <input className={s.input} id="password" type="password" name="password" value={this.state.password} onChange={this.onPasswordChange} /> </label> </div> <div className={s.formGroup}> <button disabled={!isEnabled} className={s.button} type="submit"> Submit </button> </div> </form> </div> </div> ); } } export default graphql(registerQuery)(withStyles(s)(withRouter(Register)));
the ANSWER: https://www.youtube.com/watch?v=QgpJHN_EOGM
< Route > your app in index.js if you are working in App.js
Its working..Thank you
It works! I love you!
It works! I love you!
❤️
Thanks a lot!
Thanks
Thank you so much!!!