this.props.history.push() 在 ReactJS 中不起作用

Question

在 ReactJS fetch() 示例中嘗試我的手。 如前所述 this.props.history.push() 不起作用，它沒有給出錯誤，但它根本沒有重定向。 試圖在 StackOverflow 上閱讀這個問題的其他答案，但其中很多要么太復雜（有些人炫耀）要么不太清楚。

索引.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter as Router, NavLink, Switch, Route, useHistory } from "react-router-dom";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
    <React.StrictMode>
        <Router>
            <App />
        </Router>
    </React.StrictMode>,
    document.getElementById("root")
);

應用程序.js：

import "./App.css";
import React from "react";
import { BrowserRouter as Router, NavLink, Switch, Route, useHistory } from "react-router-dom";
import RouterPage1 from "./RouterPage1";
import RouterPage2 from "./RouterPage2";

export default function App(props) {
    let history = useHistory();
    return (
        <div>
            <nav>
                <ol>
                    <li>
                        <NavLink to="/RouterPage1">RouterPage1</NavLink>
                    </li>
                    <li>
                        <NavLink to="/RouterPage2">RouterPage2</NavLink>
                    </li>
                    <li>
                        <NavLink to="/RouterPageBoth">RouterPageBoth</NavLink>
                    </li>
                </ol>
            </nav>
            <Switch>
                <Route exact path="/RouterPage1">
                    <RouterPage1 history={history} />
                </Route>
                <Route exact path="/RouterPage2">
                    <RouterPage2 history={history} />
                </Route>
            </Switch>
        </div>
    );
}

RouterPage2.js（只粘貼了必要的代碼，為簡潔起見沒有粘貼整個組件）：

addastakeholder = () => {
    let newstakeholder = JSON.stringify(this.state.newstakeholder);

    fetch("http://localhost:8080/OneToOneMappingPractice/add", {
        method: "POST",
        headers: { "Content-type": "application/json" },
        body: newstakeholder,
    }).then((r) => {
        if (r.ok) {
            //window.location.href = "/RouterPage2";
            this.setState({ newstakeholder: { name: "", address: { house_number: "", streetName: "" } } });
            this.props.history.push("/RouterPage2");
        }
    });
};

當我使用 addastakeholder() 時，它發布成功，數據正在輸入數據庫，但它沒有給我一個錯誤，也沒有重定向。 在 App.js 中，如果我使用 props 而不是 useHistory()，它會給我“this.props.history not defined”錯誤，即使我在 index.js 的 BrowserRouter 組件中包含了 App 組件。 為什么會這樣？

其次，如果我使用注釋掉的 window.location.href = "/RouterPage2"，它可以工作（POST 成功），但我無法在開發工具：網絡選項卡（Firefox）中看到 POST 日志。 為什么會這樣？

嘗試了 this.context.history.push("/RouterPage2")，不起作用，同樣的未定義錯誤。

PS：編輯1：

完整的 RouterPage2.js（請忽略結果變量和相關代碼。只考慮 result2。）：

import React from "react";

export default class RouterPage2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            stakeholders: [],
            errorString: "",
            newstakeholder: { name: "", address: { house_number: "", streetName: "" } },
        };
    }

    componentDidMount() {
        fetch("http://localhost:8080/OneToOneMappingPractice/getAll")
            .catch((error) => this.setState({ errorString: error }))
            .then((result) => result.json())
            .then((result) => this.setState({ stakeholders: result }));
    }

    addastakeholder = () => {
        let newstakeholder = JSON.stringify(this.state.newstakeholder);

        fetch("http://localhost:8080/OneToOneMappingPractice/add", {
            method: "POST",
            headers: { "Content-type": "application/json" },
            body: newstakeholder,
        }).then((r) => {
            if (r.ok) {
                //window.location.href = "/RouterPage2";
                this.setState({ newstakeholder: { name: "", address: { house_number: "", streetName: "" } } });
                this.props.history.push("/RouterPage2");
            }
        });
    };
    render() {
        let result, result2;
        let error = false;
        if (this.state.stakeholders.length > 0)
            result = (
                <ol>
                    {this.state.stakeholders.map((stakeholder) => (
                        <li key={stakeholder.stakeholder_id}>
                            {stakeholder.stakeholder_name} | {stakeholder.stakeholder_type} |
                            {stakeholder.stakeholder_email_id} | {stakeholder.stakeholder_contactno} |
                            {stakeholder.stakeholder_bankname} | {stakeholder.stakeholder_bankBranch} |
                            {stakeholder.stakeholder_IFSC} | {stakeholder.stakeholder_AccNo} |
                            {stakeholder.stakeholder_AccType} | {stakeholder.stakeholder_PAN}
                        </li>
                    ))}
                </ol>
            );
        else result = false;

        if (this.state.stakeholders.length > 0)
            result2 = (
                <ol>
                    {this.state.stakeholders.map((stakeholder) => (
                        <li key={stakeholder.id}>
                            {stakeholder.name}|{stakeholder.address.house_number}|{stakeholder.address.streetName}
                        </li>
                    ))}
                </ol>
            );
        else result2 = false;
        if (this.state.errorString !== "undefined") error = this.state.errorString;

        let blank = false;
        if (result == false) blank = <h5>There are no records to display.</h5>;
        return (
            <div>
                <h1>Stakeholder details :</h1>
                {result2}
                {error}
                {blank}
                <form>
                    Name :{" "}
                    <input
                        type="text"
                        placeholder="Name"
                        value={this.state.newstakeholder.name}
                        onChange={(e) => {
                            this.setState({ newstakeholder: { ...this.state.newstakeholder, name: e.target.value } });
                        }}
                    />
                    <br></br>
                    StreetName :{" "}
                    <input
                        type="text"
                        placeholder="StreetName"
                        value={this.state.newstakeholder.address.streetName}
                        onChange={(e) => {
                            this.setState({
                                newstakeholder: {
                                    ...this.state.newstakeholder,
                                    address: { ...this.state.newstakeholder.address, streetName: e.target.value },
                                },
                            });
                        }}
                    />
                    <br></br>
                    HouseNumber :{" "}
                    <input
                        type="text"
                        placeholder="HouseNumber(Digits Only)"
                        value={this.state.newstakeholder.address.house_number}
                        onChange={(e) => {
                            this.setState({
                                newstakeholder: {
                                    ...this.state.newstakeholder,
                                    address: { ...this.state.newstakeholder.address, house_number: e.target.value },
                                },
                            });
                        }}
                    />
                    <br></br>
                    <button type="button" onClick={this.addastakeholder}>
                        Add Stakeholder
                    </button>
                </form>
            </div>
        );
    }
}

Answer 1

嘗試了一切。 正如 Kurtis 在上面的評論中所建議的那樣，出於故障排除的目的，做了： console.log(this.props);

得到以下回應：

如您所見，存在具有不同簽名的推送 function，因此嘗試了：this.props.history.push("/RouterPage2", "")。 再次沒有工作。

因此，想到嘗試 go()。 它奏效了。

this.props.history.go("/RouterPage2"); 現在工作完美。