React重定向和传输信息到另一个页面

React redirection and transfering info to another page

本文关键字：另一个 信息 重定向 传输 React      更新时间：2023-09-26

我有一个react应用程序，使用react-router进行导航。我尝试创建的形式是更新一些数据。提交后的数据发送到服务器，虽然ajax请求，并在ajax响应是"Ok"的情况下，比用户必须重定向到另一个页面(在我的情况下，url在react-router是/carwash)和有关成功更新的信息必须显示在区分页。

我试着用三种不同的方法来做这件事:

1) this.props.history.push('/carwash')结果例外:Uncaught TypeError: Cannot read property 'push' of undefined

2) browserHistory.push("/carwash")，结果是浏览器中的列表被更改，但没有任何重定向

3)在绝对url上重定向w/o react: window.location.replace("/owner.html#/carwash")，结果是成功的，但我不明白如何通知目标页面数据更新成功。

你能解释一下react中重定向的最佳方式是什么以及如何使用它吗?还有什么不那么重要的是如何通知用户将被重定向的页面数据更新成功?

我的代码有以下视图:

import React from 'react';
import {Router} from 'react-router';
import Loading from './form/loading.jsx';
export default class EditCarWashForm extends React.Component{
static contextTypes = {
    router: React.PropTypes.object.isRequired
};
constructor(props) {
    super(props);
    this.state = {
        name        :  {value : constants.EMPTY_FIELD, isValid : false},
        address     :  {value : constants.EMPTY_FIELD, isValid : true},
        isCarWashDownload : true
    };
    this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
    e.preventDefault();
    let carWashData = {some logic}
    $.ajax({
        url: '/carwash/',
        type: 'POST',
        async: true,
        cache: false,
        contentType: 'application/json',
        data: JSON.stringify(carWashData),
        dataType: 'json',
        success: function(data) {
            if (data.message == 'Ok'){
               // browserHistory.push("/owner.html#/carwash")
                this.props.history.push('/carwash');
               // window.location.replace("/owner.html#/carwash");
        }
        }.bind(this),
    })
};

render(){
    let data = <Loading/>
    if (this.state.isCarWashDownload) {
        data =
            <form onSubmit={this.handleSubmit} id="addCarWashForm">
                <FormInputField
                    title="Name*:"
                    placeholder="Name"
                    name="name"
                    required={true}
                    maxLength={50}
                    defaultValue={this.state.name.value}
                />
                <FormInputField
                    title="Adress:"
                    placeholder="Adress"
                    name="address"
                    maxLength={200}
                />

                <div className="form-group">
                    <div className="col-sm-offset-2 col-sm-10">
                        <button type="submit">Update</button>
                    </div>
                </div>
            </form>
    }
    return (
        <div>
            {data}
        </div>
    )
}

}

尝试导入browserHistory:

// Somewhere like a Redux middleware or Flux action:
import { browserHistory } from 'react-router'
// Go to /some/path.
browserHistory.push('/some/path')
这里的

检查

此代码用于重定向:

// Somewhere like a Redux middleware or Flux action:
import { browserHistory } from 'react-router'
// Go to /some/path.
browserHistory.push('/some/path')

我的错误是在负责渲染<Router>的主要组件。我有下面的代码提到历史不是作为browserHistory而是作为hashHistory

ReactDOM.render(
<Router history={hashHistory}>
    <Route path="/" component={MyHeader}>
        <IndexRoute component={Main}/>
        <Route path="carwash" component={CarWashPage} />
        <Route path="carwashAdd" component={AddCarWashPage} />
        <Route path="carwashAdd/:carWashId" component={EditCarWashPage} />
    </Route>
</Router>,
destination
);

考虑到重定向正在工作，如果做以下更改(在我的情况下):

hashHistory.push('/some/path');
相关文章：