Unable to redirect to a different page using react bootstrap table from one route to another

Question

I am new to React. Currently, I am using react bootstrap table to populate data in my application. My task is that when the user clicks on the row of the table, it should take the parameters of the row and redirect to a different route.

My code for the react bootstrap table is as follows

   <BootstrapTable data={ this.state.userDetails } options={options}>
            <TableHeaderColumn dataField='email' isKey>Email</TableHeaderColumn>
            <TableHeaderColumn dataField='familyName'>Family Name</TableHeaderColumn>
            <TableHeaderColumn dataField='givenName'>Given Name</TableHeaderColumn>
   </BootstrapTable>

My code for the options passed to the react bootstrap table is as follows

const options={
  onRowClick:function(row, rowIndex, columnIndex, event){
    console.log(row);
    console.log(event);
    <Redirect to="/users/1" />;
  }
}

Can somebody let me know what am I doing wrong?

EDIT

My complete code is as follows

class ListView extends React.Component {

constructor(props) {
 super(props)
 this.state = {userDetails:[]}
}

onSubmit(values){


/*API Call done over here as the state needed to manipulated*/
const headers={
  "Content-Type":"application/json",
  "Authorization":cookies.get('idToken'),
  "Access-Control-Allow-Origin":"*"
}

fetch(`${awsConfig.adminDevUrl}/users?email=${values.email}`,
       {
       method:"GET",
       headers:headers
      })
     .then(response => response.json())
     .then(data => {
              if(data.length>0){
                 this.setState({userDetails:data});
              }else{
                 this.setState({userDetails:[]});
              }
               this.props.reset();// Reset the form
      })
     .catch((error) => {
            this.setState({userDetails:[]});
      })
   }

renderField(field){

const className=`form-group`;
const Field=`${field.label=='Password'? 'password':'text'}`

  return (
    <div className={className}>
        <div className="input-group">
          <span className="input-group-addon"><i className="fa fa-search" aria-hidden="true"></i></span>
           <input className="form-control" type={Field} {...field.input}/>
        </div>

    </div>);
  }

render() {
  const { handleSubmit,history }=this.props;

const options={
  onRowClick:function(row, rowIndex, columnIndex, event){
    console.log(row);
    console.log(event);
    <Redirect to="/users/1" />;
  }
}


return (

  <div>
      <div>
          <NavigationBar />

           <div className="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
              <p><b> Search Users on the Platform </b></p>
              <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                    <Field name="email" component={this.renderField} label="Search" />
              </form>
           </div>
      </div>

      <div className="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
          <BootstrapTable data={ this.state.userDetails } options={options}>
            <TableHeaderColumn dataField='email' isKey>Email</TableHeaderColumn>
            <TableHeaderColumn dataField='familyName'>Family Name</TableHeaderColumn>
            <TableHeaderColumn dataField='givenName'>Given Name</TableHeaderColumn>
          </BootstrapTable>
    </div>
</div>

   );
 }

};

Answer 1

<Redirect /> is a component that performs a route change when rendered. If you want to change route in this callback function, you should use the history.push() method. If your component is rendered by a <Route />, you should have history as props.

You can get more info about history here: https://reacttraining.com/react-router/web/api/history

Also, do not forget that JSX transpiles to React.createElement(...) that only returns a React element and does not performs anything else..