Question

它在提交页面上。用户按下提交按钮。如果请求成功，它将转到产品页面。如果没有，它将停留在当前的提交页面上。

handleSubmit() {
    fetch(post request)
    .then(response => return response)
    .then(submit => 
        if (submit.ok === true) {
            <Link to={"/product" />
        } else {
            this.setState({error: Submit failed});
        })
     .catch()
}

render() {
    return (
        <button onClick={this.handleSubmit}>Submit</button>
    )
}

它不指向另一个页面或产品页面。我想念什么吗？

当前它不是更改URL，它只是在当前路径上添加了路径。

Answer 1

这不是<Link>的正确用法。

要以编程方式转到其他路线，您可以执行以下操作：

this.props.history.push("/newRoute");

假设您使用history或通过将当前组件包含在withRouter语句中来传递Switch对象。

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, withRouter } from "react-router-dom";

import "./styles.css";

class App extends React.Component {
  state = { b: false };

  handleClick = () => {
    this.props.history.push("/horse");
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>click</button>
      </div>
    );
  }
}

const RoutedApp = withRouter(App);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <BrowserRouter>
    <RoutedApp />
  </BrowserRouter>,
  rootElement
);

CodeSandbox here。

提取后链接到另一个URL

1 个答案: