按钮未重定向到ReactJS中的新页面

Question

我以前在GpDialog.js中遇到语法错误，该错误通过使用here中的修复程序解决。但是，即使在代码编译时，即使console.log值为true，按钮也无法按预期工作，这意味着不应引发异常。有谁知道使重定向按预期工作的修补程序？这是一些相关的代码，请随时要求更多或进行澄清。

GpDialog.js

import React, { Component } from "react";
import Dialog from "@material-ui/core/Dialog";
import { Link } from "react-router-dom";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import {
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle
} from "@material-ui/core";

export class GpDialog extends Component {
  state = {
    open: false
  };
  handleToggle = () => {
    this.setState({
      open: !this.state.open
    });
  };

  render() {
    const { onClose, selectedGP, ...other } = this.props;
    const { open } = this.state;
    const { clinic } = this.props;
    const handleToggle = () => {
      this.setState({
        open: !this.state.open
      });
    };

    function handleClose() {
      onClose(selectedGP);
    }

    function handleListItemClick(clinic, name) {
      onClose(clinic, name);
      handleToggle();
    }

    return (
      <div>
        <Button variant="outlined" fullWidth="true" onClick={this.handleToggle}>
          {clinic.properties.HCI_NAME}
        </Button>
        <Dialog open={open} onClose={handleToggle}>
          <DialogContent>
            Clinic Name: {clinic.properties.HCI_NAME} <hr /> Address:{" "}
            {clinic.properties.BLK_HSE_NO} {clinic.properties.STREET_NAME} #
            {clinic.properties.FLOOR_NO}-{clinic.properties.UNIT_NO}{" "}
            {clinic.properties.BUILDING_NAME} Singapore{" "}
            {clinic.properties.PostalCode}
            <hr /> Telephone: {clinic.properties.Tel} <hr />
            Applicable subsidies:{" "}
            {clinic.properties.CLINIC_PROGRAMME_CODE.join(", ")}
            <hr />
            Distance:
            {parseFloat(clinic.distance).toFixed(2)}km away
            <hr />
            <Grid style={{ flexGrow: 1 }} direction="row">
              <Grid container justify="space-between">
                <Grid item>
                  <Button
                    variant="contained"
                    color="primary"
                    onClick={() =>
                      handleListItemClick(clinic, clinic.properties.HCI_NAME)
                    }
                  >
                    <span style={{ color: "white" }}>Add to comparison</span>
                  </Button>
                </Grid>

                <Grid item>
                  <Button
                    variant="contained"
                    style={{ backgroundColor: "#ff7c01" }}
                    onClick={this.handleCompare}
                  >
                    <Link
                      to={{
                        pathname: "/ConfirmClinicChoice",
                        state: {
                          choice: clinic,
                          formData: this.props.formData
                        }
                      }}
                    >
                      <span style={{ color: "white" }}>Select</span>
                    </Link>
                  </Button>
                </Grid>

                <Grid item>
                  <Button
                    variant="contained"
                    style={{ backgroundColor: "#ff7c01" }}
                    // cannot really break out of the scope, link must be binded with a button
                    onClick={() => {
                      const files = ["67690636.jpeg"];
                      console.log(
                        files.includes(`${clinic.properties.Tel}.jpeg`)
                      );

                      if (!files.includes(`${clinic.properties.Tel}.jpeg`)) {
                        alert(
                          "No pictorial information based on current dataset"
                        );
                        return;
                      }

                      return (
                        <Link
                          to={{
                            pathname: "/PcnImagePage",
                            state: {
                              choice: clinic
                            }
                          }}
                        ></Link>
                      );
                    }}
                  >
                    <span style={{ color: "white" }}>More info</span>
                  </Button>
                </Grid>
              </Grid>
            </Grid>
          </DialogContent>
        </Dialog>
      </div>
    );
  }
}

export default GpDialog;

PcnImagePage.js

import React, { Component } from "react";
import PCRoute from "../images/DischargeRoutes/PolyclinicRoute.png";
import Paper from "@material-ui/core/Paper";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import ArrowBack from "@material-ui/icons/ArrowBackIos";
import { Typography, Button, Card } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 3)
  }
}));
export const PcnImagePage = props => {
  const classes = useStyles();

  function goBack() {
    props.history.goBack();
  }

  const { choice } = props.location.state;
  const result = (
    <Paper
      square="false"
      className={classes.root}
      style={{ fontWeight: "bold" }}
    >
      <div>
        <span>More information </span>
        <img src={PCRoute} alt="pc route" style={{ width: "100%" }} />
      </div>
    </Paper>
  );

  return (
    <div>
      <AppBar position="static" style={{ backgroundColor: "#ff7c01" }}>
        <Toolbar>
          <IconButton
            edge="start"
            color="inherit"
            aria-label="menu"
            onClick={goBack}
          >
            <ArrowBack />
            <Typography variant="subtitle1">Back to views</Typography>
          </IconButton>{" "}
          <Typography variant="h5" align="center" style={{ flexGrow: 1 }}>
            More information
          </Typography>
          <Typography variant="subtitle1">
            <span style={{ color: "#ff7c01" }}>----------------</span>
          </Typography>
        </Toolbar>
      </AppBar>
      {result}
      <br />
      <br />
    </div>
  );
};

export default PcnImagePage;

App.js

import React from "react";
import Login from "./pages/Welcome";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Language from "./pages/Language";
import GeneralInfo from "./pages/GeneralInfo";
import Form from "./pages/PatientForm";
import FilteredResult from "./pages/FilteredResult";
import ConfirmClinicChoicePage from "./pages/ConfirmClinicChoice";
import confirmedChoicePage from "./pages/SummaryPage";
import PcnImagePage from "./pages/PcnImagePage";

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Switch>
            <Route path="/" exact component={Login} />
            <Route path="/Language" exact component={Language} />
            <Route path="/GeneralInfo" exact component={GeneralInfo} />
            <Route path="/Form" exact component={Form} />
            <Route path="/FilteredResult" exact component={FilteredResult} />
            <Route
              path="/ConfirmClinicChoice"
              exact
              component={ConfirmClinicChoicePage}
            />
            <Route
              path="/confirmedChoice"
              exact
              component={confirmedChoicePage}
            />
            <Route path="/PcnImagePage" exact component={PcnImagePage} />
          </Switch>
        </div>
      </Router>
    );
  }
}
export default App;

更新 我尝试过建议改用Redirect，并且唯一的更改是GpDialog.js上的代码段。除了添加了1条import语句之外，这是更改。

             return (<Redirect
                        to={{
                          pathname: "/PcnImagePage",
                          state: {
                            choice: clinic
                          }
                        }}
                        />
                      )
                      }
                    }
                    >
                    <span style={{ color: "white" }}>More info</span>  


                  </Button>


                </Grid>



              </Grid>
            </Grid>
          </DialogContent>
        </Dialog>
      </div>
    );
  }
}

Answer 1

在onClick事件处理程序中返回组件将无法正常工作。对于您的情况，我建议使用组件的状态和Redirect组件。

要重定向到新页面，请将状态的redirectTo对象设置为所需值。稍后，它将使用Redirect对象传递给redirectTo属性来呈现to组件，该属性将以编程方式导航到指定位置。

GpDialog.js

import React, { Component } from "react";
import Dialog from "@material-ui/core/Dialog";
import { Link, Redirect } from "react-router-dom";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import {
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle
} from "@material-ui/core";

export class GpDialog extends Component {
  state = {
    open: false,
    redirectTo: null
  };
  handleToggle = () => {
    this.setState({
      open: !this.state.open
    });
  };

  render() {
    const { onClose, selectedGP, ...other } = this.props;
    const { open } = this.state;
    const { clinic } = this.props;
    const handleToggle = () => {
      this.setState({
        open: !this.state.open
      });
    };

    function handleClose() {
      onClose(selectedGP);
    }

    function handleListItemClick(clinic, name) {
      onClose(clinic, name);
      handleToggle();
    }

    if (this.state.redirectTo) {
      return (
        <Redirect to={this.state.redirectTo} />
      );
    }

    return (
      <div>
        <Button variant="outlined" fullWidth="true" onClick={this.handleToggle}>
          {clinic.properties.HCI_NAME}
        </Button>
        <Dialog open={open} onClose={handleToggle}>
          <DialogContent>
            Clinic Name: {clinic.properties.HCI_NAME} <hr /> Address:{" "}
            {clinic.properties.BLK_HSE_NO} {clinic.properties.STREET_NAME} #
            {clinic.properties.FLOOR_NO}-{clinic.properties.UNIT_NO}{" "}
            {clinic.properties.BUILDING_NAME} Singapore{" "}
            {clinic.properties.PostalCode}
            <hr /> Telephone: {clinic.properties.Tel} <hr />
            Applicable subsidies:{" "}
            {clinic.properties.CLINIC_PROGRAMME_CODE.join(", ")}
            <hr />
            Distance:
            {parseFloat(clinic.distance).toFixed(2)}km away
            <hr />
            <Grid style={{ flexGrow: 1 }} direction="row">
              <Grid container justify="space-between">
                <Grid item>
                  <Button
                    variant="contained"
                    color="primary"
                    onClick={() =>
                      handleListItemClick(clinic, clinic.properties.HCI_NAME)
                    }
                  >
                    <span style={{ color: "white" }}>Add to comparison</span>
                  </Button>
                </Grid>

                <Grid item>
                  <Button
                    variant="contained"
                    style={{ backgroundColor: "#ff7c01" }}
                    onClick={this.handleCompare}
                  >
                    <Link
                      to={{
                        pathname: "/ConfirmClinicChoice",
                        state: {
                          choice: clinic,
                          formData: this.props.formData
                        }
                      }}
                    >
                      <span style={{ color: "white" }}>Select</span>
                    </Link>
                  </Button>
                </Grid>

                <Grid item>
                  <Button
                    variant="contained"
                    style={{ backgroundColor: "#ff7c01" }}
                    // cannot really break out of the scope, link must be binded with a button
                    onClick={() => {
                      const files = ["67690636.jpeg"];
                      console.log(
                        files.includes(`${clinic.properties.Tel}.jpeg`)
                      );

                      if (!files.includes(`${clinic.properties.Tel}.jpeg`)) {
                        alert(
                          "No pictorial information based on current dataset"
                        );
                        return;
                      }

                      this.setState({
                        redirectTo: {
                          pathname: "/PcnImagePage",
                          state: {
                            choice: clinic
                          }
                        }
                      });
                    }}
                  >
                    <span style={{ color: "white" }}>More info</span>
                  </Button>
                </Grid>
              </Grid>
            </Grid>
          </DialogContent>
        </Dialog>
      </div>
    );
  }
}

export default GpDialog;

编辑前：

一个Link组件创建一个link元素，仍然需要用户在导航到新页面之前单击它。但是，还有一个Redirect组件，在呈现时会立即导航到其他位置。因此，对于GpDialog.js文件，您应该使用Redirect组件而不是Link。

查看官方API文档：https://reacttraining.com/react-router/web/api/Redirect