javascript - 从主组件 React Router 4 推送到另一个 View

Question

我是 react 和 react 路由器的新手。我试图实现的是进行 AJAX 调用，然后我想转到另一个组件/页面。我习惯了 Vue，使用 Vue 你会得到类似 this.$router.push('/page') 的东西。所以我试图找到类似的东西，但我仍然不确定是否可能，因为我发现了很多不同的答案/问题。我尝试在文档中查找它，但没有成功。

我的主要组件(由于代码较长而进行了一些小调整)

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

export default class Main extends Component {

    constructor() {
        super();

        this.AddIcecream = this.AddIcecream.bind(this);

        this.state = {
            icecreams: {}
        }

    }

    componentDidMount() {

        axios.get('/api/icecreams').then(response => {
            this.setState({
                icecreams: response.data
            });
        });


    }


    AddIcecream(product) {

        product.price = Number(product.price);
        /*Fetch API for post request */
        fetch('/api/icecreams/', {
            method: 'post',
            /* headers are important*/
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },

            body: JSON.stringify(product)
        })
            .then(response => {
                return response.json();
            })
            .then(data => {
                //update the state of products and currentProduct
                this.setState((prevState) => ({
                    icecreams: prevState.icecreams.concat(data),
                    currentProduct: data
                }));

                //Push to another component here

            })

    }

    render() {
        return (
            <Router}>
                <div className="container">

                    <div className="row justify-content-center dashboard-header">
                        <div className="col-md-12">
                            <h2><i className="ion-ios-home-outline"></i> Dashboard</h2>
                            <h3>Welcome, Glenn</h3>
                        </div>
                    </div>

                    <div className="row">

                        <div className="col-md-3">

                            <div className="sidebar-router">

                                <ul>
                                    <li className="active"><Link to="/home/">Icecreams</Link></li>
                                    <li className="active"><Link to="/home/orders">Orders</Link></li>
                                </ul>

                            </div>

                        </div>

                        <div className="col-md-9">

                            <Route exact path="/home/" render={() => <Icecreams icecreams={this.state.icecreams} loadIcecreams={this.loadIcecreams} />} />
                            <Route exact path="/home/edit/:id" render={(props) => <Edit {...props} icecreams={this.state.icecreams} />} />
                            <Route exact path="/home/add" render={() => <Add AddIcecream={this.AddIcecream} />} />

                            <Route exact path="/home/orders" render={() => <Orders orders={this.state.orders} />} />



                        </div>
                    </div>

                </div>

            </Router>
        );
    }
}

if (document.getElementById('root')) {
    ReactDOM.render(<Main />, document.getElementById('root'));
}

完成 AJAX 请求后处理“重定向”到另一个组件的最佳方法是什么？如何实现这一点？

Answer 1

import {withRouter, ....restofimports} from 'react-router-dom'
 class Main extends Component {
//code...
}

通过使用 withRouter，你的类现在可以访问 routers 属性，你需要的是历史记录。这允许您在应用程序中导航。

const WithRouterApp = withRouter(App);

您通常渲染应用程序的位置

render(
  <Router>
    <WithRouterApp />
  </Router>,
  document.getElementById("root")
);

现在使用 setState 回调和 this.props.history.push 来更改页面。

axios.get('/api/icecreams').then(response => {
            this.setState({
                icecreams: response.data
            }, () => this.props.history.push('/somepage'));
        });