按钮不重定向到ReactJS中的新页面
早些时候，我在按钮不重定向到ReactJS中的新页面,reactjs,react-router,Reactjs,React Router,早些时候，我在GpDialog.js中遇到了一个语法错误，通过使用来自的修复程序解决了这个问题。但是，即使在代码编译时，按钮也不能按预期工作，即使console.log值为true，这意味着不应该引发异常。有人知道如何修复重定向，使其按预期工作吗？这里是一些相关的代码，请随意要求更多或澄清 GpDialog.js import React, { Component } from "react"; import Dialog from "@material-ui/core/Dialog"; imp
GpDialog.jsconsole.logimport 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;
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;
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;
在
onClick重定向redirectToto重定向到重定向import React，{Component}来自“React”；
从“@material ui/core/Dialog”导入对话框；
从“react router dom”导入{Link，Redirect}；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Grid”导入网格；
进口{
对话行动，
对话内容，
对话内容文本，
对话标题
}来自“@材料界面/核心”；
导出类GpDialog扩展组件{
状态={
开：错，
重定向到：空
};
handleToggle=（）=>{
这是我的国家({
打开：！this.state.open
});
};
render（）{
const{onClose，selectedGP，…other}=this.props；
const{open}=this.state；
const{clinic}=this.props；
const handleToggle=（）=>{
这是我的国家({
打开：！this.state.open
});
};
函数handleClose（）{
onClose（selectedGP）；
}
函数handleListItemClick（诊所，名称）{
onClose（诊所，名称）；
handleToggle（）；
}
if（this.state.redirectTo）{
返回(
);
}
返回(
{clinic.properties.HCI_NAME}
诊所名称：{Clinic.properties.HCI_Name}
地址：{“”}
{clinic.properties.BLK_HSE_NO}{clinic.properties.STREET_NAME}#
{clinic.properties.FLOOR_NO}-{clinic.properties.UNIT_NO}{”“}
{clinic.properties.BUILDING_NAME}新加坡{''}
{clinic.properties.PostalCode}
电话：{clinic.properties.Tel}
适用补贴：{“}
{clinic.properties.clinic\u PROGRAMME\u CODE.join（“，”）}
距离：
{parseFloat（诊所距离）.toFixed（2）}公里
handleListItemClick（诊所，诊所.属性.HCI\U名称）
}
>
增加比较
挑选
{
常量文件=[“67690636.jpeg”]；
console.log(
文件.includes（${clinic.properties.Tel}.jpeg`）
);
如果（！files.includes（`${clinic.properties.Tel}.jpeg`）））{
警觉的(
“没有基于当前数据集的图像信息”
);
返回；
}
这是我的国家({
重定向到：{
路径名：“/PcnImagePage”，
声明：{
选择：诊所
}
}
});
}}
>
更多信息
);
}
}
导出默认GPD对话框；
Link重定向组件，它在渲染时会立即导航到不同的位置。因此，在GpDialog.js
文件中，您应该使用重定向
组件，而不是链接
查看官方API文档：我可以在您的代码中看到，您的按钮返回了一个
组件，它不会将用户重定向到您想要的路径。您可以使用
或this.props.history.push（/path）
来执行重定向。检查React Router的API:@Rodrigo我尝试了你的建议，只修改了GpDialog.js
，这也是答案所建议的，但是按钮仍然无法将我重定向到下一页我尝试了你的建议，但是，它似乎不起作用，更新了帖子。@PrashinJeevaganth当您单击按钮时，浏览器控制台中是否出现任何错误？除了控制台.log
打印true之外，没有任何错误，我特意将其留在那里进行调试。公平地说，我认为PcnImagePage.js
可能有一些错误，因为我使用另一个页面链接到它，它会进入一个白色屏幕，但我认为如果重定向
工作正常，它至少应该进入同一个白色屏幕。@PrashinJeevaganth好的，我意识到在onClick
事件处理程序中返回组件没有任何作用。我更新了我的答案，并让我知道它是否有效。
return (<Redirect
to={{
pathname: "/PcnImagePage",
state: {
choice: clinic
}
}}
/>
)
}
}
>
<span style={{ color: "white" }}>More info</span>
</Button>
</Grid>
</Grid>
</Grid>
</DialogContent>
</Dialog>
</div>
);
}
}
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;