-
-
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()` |
@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
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: ""
});
}
export default withRouter(Login);