无法使用从一个路由到另一个路由的反应引导表重定向到不同的页面

Question

我是React 的新手。目前，我正在使用react bootstrap table 在我的应用程序中填充数据。我的任务是当用户点击表格的行时，它应该获取行的参数并重定向到不同的路由。

react bootstrap 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(...)，它只返回一个 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 时，未传播的事件可以被中断。我在这里进行了测试，只能使用：

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