react router link with material ui button submit - reactjs

Question

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

Answer 1

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'

Answer 2

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'
}

Answer 3

<Button
onClick={() => {}}
variant="outlined"
component={Link}
to={{
pathname: `/`,
search: location.search,
}}
>
Submit
</Button>