Q:

Material UI button not redirecting to path

I have a button that has an onClick function to redirect to a certain component with props
<Button
  variant="contained"
  color="primary"
  className={classes.button}
  endIcon={<SendIcon/>}
  onClick={() => {
        <Redirect 
         to={{
          pathname: '/view',
           state: {
            id: row.id
                  }
             }}
          />
         }}
 >
    View History
 </Button>

My route code
<Route exact path="/view"  render={(props) => <NewTestComp {...props}/>} />

The button is not redirecting I tried many different solutions but I can't find an answer

A:

You need to make use of history.push to redirect to a new page and Redirect component needs to be rendered to be effective and onClick handler doesn't render the returned value
<Button
  variant="contained"
  color="primary"
  className={classes.button}
  endIcon={<SendIcon/>}
  onClick={() => {
        props.history.push({
          pathname: '/view',
           state: {
            id: row.id
           }
        });
  }
 >
    View History
 </Button>

The way to use Redirect would be to setState and render the component conditionally
<Button
  variant="contained"
  color="primary"
  className={classes.button}
  endIcon={<SendIcon/>}
  onClick={() => {
        this.setState({ redirectWithState: {
            id: row.id
        }})
 >
    View History
 </Button>
{ redirectWithState && <Redirect 
         to={{
          pathname: '/view',
           state: redirectWithState
             }}
          />
         }}

