无法使用 react bootstrap table 从一个路由重定向到另一个页面

Question

我是 React. Currently, I am using react bootstrap table 的新手，无法在我的应用程序中填充数据。我的任务是，当用户点击 table 的行时，它应该采用该行的参数并重定向到不同的路由。

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

我传递给 react bootstrap table 选项的代码如下

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

有人可以告诉我我做错了什么吗？

编辑

我的完整代码如下

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 /> 是一个在渲染时执行路由更改的组件。如果你想在这个回调函数中改变路由，你应该使用 history.push() 方法。如果你的组件由 <Route /> 渲染，你应该有 history 作为属性。

您可以在此处获取有关 history 的更多信息：https://reacttraining.com/react-router/web/api/history

此外，不要忘记 JSX 转换为 React.createElement(...) 只有 returns 一个 React 元素并且不会执行任何其他操作..

Answer 2

通过定义一个名为 redirect 的状态来尝试一次，然后在行上单击设置 redirect 的状态。

class ListView extends React.Component {

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

    /* your remaining code */

    render() {

        const { handleSubmit,history }=this.props;

        const options={
            onRowClick:function(row, rowIndex, columnIndex, event){
                this.setState({ redirect : true })
            }
        }

        // redirect only if the state is true
        if(this.state.redirect) {
            return(
                <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 3

在大多数情况下使用 react-router 时，可以中断未传播的事件。我这里测试了，只能执行using:

onRowClick: (row, rowIndex, columnIndex, event) => location.href = '#/plannings';

无法使用 react bootstrap table 从一个路由重定向到另一个页面

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

javascript

reactjs

react-router

react-bootstrap-table

react-router-dom