Question

我需要帮助，正在编写此表单，提交后，“已发布”的状态从“假”变为“真”，我希望“将重定向返回到= / landing”;“将我重定向到登录页面，但是，我认为这不是因为该行在初始渲染后不会重新运行。我希望更改“已发布”的状态将导致重新渲染。我听说过使用历史记录推送，并尝试使其适应我的代码，但失败了。我不知道如何用“ withRouter”包装我的组件，因为我已经用“ connect”包装了它。我该如何实现？我已经阅读了许多有关此的文章，但我不知道如何使它适应我的代码。任何帮助表示赞赏。

import React, { useState } from "react";
import Navbar from "./Navbar";
import { connect, useDispatch } from "react-redux";
import { Redirect } from "react-router-dom";
import { createProject } from "../actions/projectAction";
import PropTypes from "prop-types";
import { push } from "connected-react-router";

const EditProject = ({ posted, createProject }) => {
  const dispatch = useDispatch();
  const [formData, setFormData] = useState({
    projectTitle: "",
    projectDescription: "",
    deliveryDate: ""
  });

  const { projectTitle, projectDescription, deliveryDate } = formData;

  const onChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const onSubmit = async e => {
    e.preventDefault();
    createProject({ projectTitle, projectDescription, deliveryDate });
    dispatch(push("/login"));
  };

  if (posted) {
    return <Redirect to="/landing" />;
  }

  return (
    <div>
      <Navbar />
      <div className="container">
        <form onSubmit={e => onSubmit(e)}>
          <h4>Project Title</h4>
          <input
            name="projectTitle"
            value={projectTitle}
            className="form-control"
            placeholder="Your project title"
            onChange={e => onChange(e)}
          />
          <h4>Delivery Date</h4>
          <input
            type="date"
            className="form-control"
            name="deliveryDate"
            value={deliveryDate}
            onChange={e => onChange(e)}
          />
          <h4>Description</h4>
          <textarea
            name="projectDescription"
            value={projectDescription}
            className="form-control"
            rows="10"
            onChange={e => onChange(e)}
          ></textarea>
          <input type="submit" className="btn btn-primary" value="Create" />
          <a href="/projects" className="btn btn-danger">
            Cancel
          </a>
        </form>
      </div>
    </div>
  );
};

EditProject.propTypes = {
  createProject: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  posted: state.posted
});

export default connect(mapStateToProps, { createProject })(EditProject);

Answer 1

我认为您必须定义路线。从下面的代码中，您可以对路由有所了解。

在 App.js 中，我基本上定义了路线，并创建了两个其他功能组件 Landing 和 EditProject 以模拟您的想法。此外，我出于导航目的使用了 Link

App.js

import React, { Component } from "react";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import EditProject from "./editProject";
import Landing from "./landing";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div id="container">
          <div>
            <Link to="/">Landing Page</Link>
            <Link to="/editproject">Edit Project</Link>
          </div>
          <Switch>
            <Route path="/editproject" component={EditProject} />
            <Route exact path="/" component={Landing} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Landing 功能组件

import React from "react";

const Landing = () => {
  return <h1>Landing Page</h1>;
};

export default Landing;

EditProject 功能组件

import React from "react";

const EditProject = props => {
  function handleSubmit(e) {
    e.preventDefault();
    console.log("submitted");
    //do your task here before redirect
    //...
    props.history.push("/");
  }

  return (
    <div>
      <h1>Edit Project</h1>
      <form onSubmit={handleSubmit}>
        <button>Submit</button>
      </form>
    </div>
  );
};

export default EditProject;

希望它会对您有所帮助。

Answer 2

我想在您的代码中处理两件事。

如果EditProject组件直接进入Route，则您可以使用推送。

const EditProject = ({ { posted, createProject, history: { push } }) => {
    push() // your access to push
}

第二，在您的连接中，我不支持您的连接这一想法。可能是提交功能未运行。

您可以执行以下操作来有所作为。

export default connect(mapStateToProps, { handleNewProject, createProject })(EditProject);

现在，重新编写EditProject组件应该是

import React, { useState, useEffect } from "react";

const EditProject = ({ { posted, handleNewProject, history: { push } }) => {
    push() // your access to push
    // useEffect React component life cycle Hook
    useEffect(() => () => push('/landing'), [posted]);

}

注意，我使用React Hook就像使用React class component life circle一样。

Answer 3

比如说，在注销提交按钮上，我想转到用户/登录页面：

export default function MyComponent(props) {    
    // ...

    const handleSubmit = async (event) => {
        props.history.push('/user/login');
    }
}

注意：如果组件参数中不存在 props，您可以添加它。

react.js 中的一些其他非标准方式（但常用于大型项目）

以下之一将起作用：

let url = '/user/login'

props.history.push(url);

window.location = url;
window.location.href = url;
window.location.replace(url);

window.open(url)
window.open(url, "_self")
window.open(url, '_blank');
window.open(url, 'newWindow');
window.open(url, 'newwin');

window.location.reload(true);

使用React功能组件进行重定向

3 个答案: