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

Question

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

我的反应引导表代码如下

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

我传递给反应引导表的选项代码如下

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()方法。如果你的组件是由 a 渲染的<Route />，你应该有historyas props。

您可以在此处获取更多信息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';