Cfrgtkky

I am using flask on the backend and react, react router and material-ui as a frontend.

I have:

• material-ui/core 3.4.0,


• react router dom 4.3.1

I am trying to create simple sign up form.
I would like to submit the form's data and then redirect to the index page using react router.
My problem is that material-ui button does not work with the link from router.
Is it possible to combine this two together somehow?

My code:

import:

import React, { Component } from 'react'

import { Link } from 'react-router-dom'

import { withStyles, Grid, Paper, Avatar, Typography, Button, TextField} from '@material-ui/core'

import LockIcon from '@material-ui/icons/LockOutlined'

and render return:

render() {

  const { classes } = this.props

  const { user: { username, password } } = this.state

  return (

    <Grid container className={classes.root}>

      <Paper className={classes.paper}>



        <Avatar className={classes.avatar}>

          <LockIcon />

        </Avatar>



        <Typography component="h1" variant="h5">

          Sign up

        </Typography>



        <form onSubmit={this.saveUser}>

          <TextField label="Username" value={username} onChange={this.handleChange('username')} margin="normal" required fullWidth/>

          <TextField label="Password" value={password} onChange={this.handleChange('password')} margin="normal" required fullWidth type='password'/>



          <Button component={Link} to="/" type="submit" fullWidth variant="contained" color="primary">Sign Up</Button>



        </form>

      </Paper>

    </Grid>

  );

}

When I remove from Button component={Link} to="/":

<Button type="submit" fullWidth variant="contained" color="primary">Sign Up</Button>

then submit work and saves data in database. When I remove type="submit":

<Button component={Link} to="/" fullWidth variant="contained" color="primary">Sign Up</Button>

then redirect to index page.

Can I combine somehow this two in one button?

RaisedButton, FlatButton from material-ui not working anymore

Add to state:

doRedirect: false

In render():

<Button type="submit" fullWidth variant="contained" color="primary">Sign Up</Button>

In submit hanler:

saveUser = () => {

    // **********

    // Your code to update database

    // **********



    this.setState({ doRedirect: true });

}

In render():

{ this.state.doRedirect && <Redirect to="/" /> }

And of course:

import { Redirect } from 'react-router-dom'

In your save user function just redirect after saving the user.
you can get history from props

saveUser = event => {

  event.preventDefault()

  //update database with user

  this.props.history.location.push('new-route')

  // or you can use window.location

  window.location.href = 'new-route'

}