Question

我对react-router进行了导航反应。我尝试创建更新一些数据的表单。提交后，数据通过ajax请求发送到服务器，如果ajex响应为“Ok”，则必须将用户重定向到另一个页面（在我的情况下，反应路由器中的url是/carwash）和有关的信息必须在distination页面中显示成功更新。

我试图通过3种不同的方式来做到这一点：

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

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

3）对绝对URL的重定向没有反应：window.location.replace("/owner.html#/carwash")，结果是成功的，但我不知道如何通知destitaion页面数据更新成功。

你能解释一下反应中重定向的最佳方法是什么，以及如何使用它？那么重要的是如何将用户重定向的页面更新为数据更新是否成功？

我的代码有以下视图：

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

}

}

Answer 1

尝试导入browserHistory，如：

// Somewhere like a Redux middleware or Flux action:
import { browserHistory } from 'react-router'

// Go to /some/path.
browserHistory.push('/some/path')

check here

Answer 2

此代码用于重定向：

// 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');

反应重定向并将信息传输到另一个页面

2 个答案: