重定向不适用于单个组件中的 react-router

Question

我已将反应路由器设置为从 "/" 路由重定向到自定义路由 /:city/posts ，但重定向未按预期工作，按钮页面刷新的 onClick ，我已将其设置在其他组件中正常工作，不确定是什么是问题

沙箱： https : //codesandbox.io/s/focused-sammet-eitqr

import React, { useState } from "react";
import {
  Form,
  Container,
  Button,
  DropdownButton,
  Dropdown
} from "react-bootstrap";
import { Redirect } from "react-router-dom";

const Location = () => {
  let [city, setCity] = useState("");
  let [acceptedTOS, setAcceptedTOS] = useState(false);

  const handleFormSubmit = () => {
    // if (city !== "" && acceptedTOS === true) {
    return <Redirect to="/city/posts" />;
    // }
  };

  console.log("city ====", city, "acceptedTOS===", acceptedTOS);
  return (
    <Container>
      <Form onSubmit={handleFormSubmit}>
        <h3>Select a City</h3>

        <br />

        <DropdownButton
          id="dropdown-basic-button"
          title={city !== "" ? city : "Canada"}
        >
                </DropdownButton>

        <br />
        <Form.Group>
          <Form.Check
            required
            name="terms"
            label="I have read and agreed to follow TOS"
            onChange={() => {
              setAcceptedTOS(true);
            }}
            // isInvalid={!!errors.terms}
            // feedback={errors.terms}
            id="validationFormik0"
          />

          <Button type="submit">Submit form</Button>
        </Form.Group>
      </Form>
    </Container>
  );
};

export default Location;

Answer 1

您应该使用状态进行重定向，

const [redirect, setRedirect] = useState(false)

在handleFormSubmit添加e.preventDefault() ，

const handleFormSubmit = (e) => {
    e.preventDefault()
    setRedirect(true) //set redirect to ture
};

最后在你的回报中，你可以重定向，

return (
    <Container>
      {redirect && <Redirect to="/:city/posts" />}
      ...
    </Container>
)