react-router-v4 相关问题

如何在路线外访问比赛？

完成以下代码中尝试的最佳方法是什么？ App无法访问其中定义的路由的match.params，但我想将状态的一部分传递给子组件...

在react-router-dom中测试PrivateRoute

如何使用react-router-dom关闭浏览器后退按钮上的模式？

我正在使用react-router-dom，我想要的是当我单击浏览器后退按钮时能够关闭Modal。另外，在我的场景中，模态组件不是Switch的一部分。那么如何关闭...

有人对动态面包屑和反应路由器4有解决方案吗？

我找不到如何使用react-router v4实现动态面包屑的方法>

当我更改react-router的嵌套路由中的链接时，组件未加载

我在ComponentA内有以下代码 //更多...

我如何从内部组件导航到外部组件react-router-dom？

我确实需要一些帮助，想不出解决方案:(。我遇到这样的问题：例如，我在一个名为http：// localhost：3000 / quiz / draft的路由中。去http：// localhost：3000 / quiz / ...

React-Router UrlParameter，默认值未显示为活动状态

我有一个竞赛结果应用程序，该应用程序的NavBar显示一个“所有结果” Nav.Link选项以显示所有结果，而一个“添加结果” Nav.Link选项允许您输入结果。扭曲的是...

使用React Router保护React应用中的路由

我用Redux，React Router和Auth0创建了一个简单的React应用程序，该应用程序可以处理用户身份验证。我正在尝试创建此基本行为来控制访问：所有未经身份验证的用户都将...

使用Router（）命名导出

我想使用Router（）导出组件，但是我需要使用默认的默认导出名称Router（TopNav）来命名它；我试过用Router（TopNav）导出{TopNav};我从...得到的错误]]

如何使用组件中的redux传递此初始状态值？

我正在使用multer处理将图片上传到我的Next.js应用。而且我正在使用Redux进行状态管理...就是说，我在商店中创建了一个名为userAvatar的属性，用于最终的化身为...

刷新时反应路由器黑屏

我有一个使用create-react-app的单页应用程序，该应用程序与Firebase托管一起部署。刷新适用于/的首页路由，但是当我处于/ product-details路由并刷新时，会返回...

TypeScript React：RouteComponentProps类型错误或无法访问历史记录

我已经制作了一个组件并像... 和...

不变式：您不应该在 使用GoogleMap API的外部使用 我正在尝试在对话框中添加“选择按钮”，该对话框使用ClinicMap.js内部的Google Map API从组件中弹出。我已经在CompareDialog.js上实现了相同的“选择按钮”，但是由于某种原因，它在这里有效，但在ClinicMap.js上却无效。我收到了错误Invariant failed: You should not use <Route> outside a <Router>，并提到了this，但不了解该解决方案如何应用于我的上下文。 有人可以启发我解决此问题的方法吗？ 这里是一些相关代码，请随时提出更多说明。 ClinicMap.js import React, { Fragment, Component } from "react"; import { Map, GoogleApiWrapper, Marker } from "google-maps-react"; import PcDialog from "../PcDialog"; import Button from "@material-ui/core/Button"; import InfoWindowEx from "./InfoWindowEx"; import { Link, Redirect } from "react-router-dom"; const mapStyles = { width: "100%", height: "100%" }; export class ClinicMap extends Component { state = { activeMarker: {}, selectedPlace: { clinic: { type: "" } }, showingInfoWindow: false }; onMarkerClick = (props, marker) => this.setState({ activeMarker: marker, selectedPlace: props, showingInfoWindow: true }); render() { const { GP, PC, parentCallback } = this.props; const { selectedPlace } = this.state; const displayCurrent = ( <Marker clinic={{type: "currentloc"}} position={{ lat: this.props.coord[1], lng: this.props.coord[0] }} /> ); const displayGP = GP.map(clinic => { clinic.type = "GP"; clinic.name = clinic.properties.HCI_NAME; clinic.price = "$$"; clinic.rating = "4.3"; clinic.doctorName = clinic.properties.DR_NAME; clinic.formattedOpeningHours = clinic.properties.ALL_OPENING_HOURS.map( period => period.day_string + ":</br>" + period.opening_hours.join(",</br>") ).join("</br></br>"); clinic.formattedDirections = clinic.properties.ALL_DIRECTIONS.map( path => path.transport_string + "</br>" + path.directions.join(",</br>") ).join("</br></br>"); return ( <Marker key={clinic.id} clinic={clinic} id={clinic.id} icon={"http://maps.google.com/mapfiles/ms/icons/green.png"} position={{ lat: clinic.geometry.coordinates[1], lng: clinic.geometry.coordinates[0] }} onClick={this.onMarkerClick} /> ); }); const displayPC = PC.map(clinic => { clinic.type = "Polyclinic"; clinic.name = clinic.Name; clinic.price = "$"; clinic.rating = "4.0"; return ( <Marker key={clinic.id} clinic={clinic} id={clinic.id} icon={"http://maps.google.com/mapfiles/ms/icons/blue.png"} position={{ lat: clinic.coord[1], lng: clinic.coord[0] }} onClick={this.onMarkerClick} > <PcDialog clinic={clinic} /> </Marker> ); }); return ( <Map google={this.props.google} zoom={15} style={mapStyles} initialCenter={{ lat: this.props.coord[1], lng: this.props.coord[0] }} > {displayGP} {displayPC} {displayCurrent} {console.log(displayCurrent)} <InfoWindowEx marker={this.state.activeMarker} onClose={this.onInfoWindowClose} visible={this.state.showingInfoWindow} selectedPlace={selectedPlace} > {selectedPlace.clinic.type === "GP" ? ( <div> GP: //some other data <hr /> Telephone: {selectedPlace.clinic.properties.Tel} <hr /> Applicable subsidies:{" "} {selectedPlace.clinic.properties.CLINIC_PROGRAMME_CODE.join(", ")} <hr /> Distance: {parseFloat(selectedPlace.clinic.distance).toFixed(2)}km away <hr /> Doctor: {selectedPlace.clinic.properties.DR_NAME} <hr /> <p>Opening Hours:</p> <hr /> { selectedPlace.clinic.properties.ALL_OPENING_HOURS.map(period => ( <p> {period.day_string} <br /> {period.opening_hours.join(", ")} </p> )) } <hr /> <p>Directions:</p> { selectedPlace.clinic.properties.ALL_DIRECTIONS.map(path => ( <p> {path.transport_string} <br /> {path.directions.join(", ")} </p> )) } <hr /> <img src={process.env.PUBLIC_URL + `/ClinicPictures/${selectedPlace.clinic.properties.FILE_NAME}.png`} alt="clinic picture" style={{ width: "100%" }} /> <hr /> <Button> <Link to={{ pathname: "/ConfirmClinicChoice", state: { choice: selectedPlace.clinic } }} > <span>Select</span> </Link> </Button> <Button variant="contained" color="primary" onClick={() => this.props.callbackFunction(selectedPlace.clinic) } > {console.log(selectedPlace.clinic)} <span style={{ color: "white" }}>Add to comparison</span> </Button> </div> ) : selectedPlace.clinic.type === "Polyclinic" ? ( <div> //some other data <hr /> Telephone: {selectedPlace.clinic.Tel} <hr /> Distance:{" "} {parseFloat(selectedPlace.clinic.distance).toFixed(2)}km away <hr /> <Button> <Link to={{ pathname: "/ConfirmClinicChoice", state: { choice: selectedPlace.clinic } }} > <span>Select</span> </Link> </Button> <Button variant="contained" color="primary" onClick={() => this.props.callbackFunction(selectedPlace.clinic) } > <span style={{ color: "white" }}>Add to comparison</span> </Button> </div> ) : ( <div>Input Location</div> )} </InfoWindowEx> </Map> ); } } export default GoogleApiWrapper({ apiKey: "" })(ClinicMap); CompareDialog.js import React, { Component, Fragment } from "react"; import Dialog from "@material-ui/core/Dialog"; import { Link } from "react-router-dom"; import Button from "@material-ui/core/Button"; import Table from "@material-ui/core/Table"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import TableFooter from "@material-ui/core/TableFooter"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import MyButton from "../../util/MyButton"; import { DialogActions, DialogContent, DialogContentText, DialogTitle, Typography } from "@material-ui/core"; import { maxWidth, fontSize } from "@material-ui/system"; export class CompareDialog extends Component { state = { open: false, priceOpen: false, userNationality: this.props.formData.nationality, userAge: this.props.formData.age, userSubsidyType: this.props.formData.subsidyType }; handleToggle = () => { this.setState({ open: !this.state.open }); }; handlePriceToggle = () => { this.setState({ priceOpen: !this.state.priceOpen }); }; render() { const { open, priceOpen, userNationality, userAge, userSubsidyType } = this.state; const { clinicOne, clinicTwo, formData } = this.props; function createData(name, gp, pc) { return { name, gp, pc }; } const rows = [ createData( <span style={{ fontWeight: "bold" }}>Name</span>, <span style={{ fontWeight: "bold" }}>{clinicOne.name}</span>, <span style={{ fontWeight: "bold" }}> {clinicTwo.name}</span> ), createData( "Distance", parseFloat(clinicOne.distance).toFixed(2), parseFloat(clinicTwo.distance).toFixed(2) ), createData("Price", clinicOne.price, clinicTwo.price), createData("Ratings", clinicOne.rating, clinicTwo.rating), createData("Doctor name", ((clinicOne.type === "GP") ? clinicOne.doctorName : ""), ((clinicTwo.type === "GP") ? clinicTwo.doctorName : "")), createData( "Opening hours", clinicOne.type === "GP" ? ( <div dangerouslySetInnerHTML={{ __html: clinicOne.formattedOpeningHours }} /> ) : ( "" ), clinicTwo.type === "GP" ? ( <div dangerouslySetInnerHTML={{ __html: clinicTwo.formattedOpeningHours }} /> ) : ( "" ) ), createData( "Directions", clinicOne.type === "GP" ? ( <div dangerouslySetInnerHTML={{ __html: clinicOne.formattedDirections }} /> ) : ( "" ), clinicTwo.type === "GP" ? ( <div dangerouslySetInnerHTML={{ __html: clinicTwo.formattedDirections }} /> ) : ( "" ) ) ]; //some data irrelevant to the problem const handleToggle = () => { this.setState({ open: !this.state.open }); }; const handlePriceToggle = () => { this.setState({ priceOpen: !this.state.priceOpen }); }; return clinicOne === null || clinicTwo === null ? ( "Please select 2 clinics for comparison." ) : ( <div> <Button variant="contained" style={{ backgroundColor: "#ff7c01" }} onClick={handleToggle} > Compare! </Button> <Dialog style={{ fontSize: "1vw" }} open={open} onClose={handleToggle} maxWidth="lg" > <DialogContent> <Table> <TableHead> <TableRow> <TableCell> </TableCell> <TableCell align="right">{clinicOne.type} </TableCell> <TableCell align="right">{clinicTwo.type} </TableCell> </TableRow> </TableHead> <TableBody> {rows.map(row => ( <TableRow key={row.name}> <TableCell component="th" scope="row"> {row.name === "Price" ? ( <Fragment> Price <MyButton onClick={handlePriceToggle} tip="More Details" > <Typography variant="subtitle1">Expand</Typography> <ExpandMoreIcon /> </MyButton> <Dialog open={priceOpen} onClose={handlePriceToggle}> <DialogContent> <p style={{ fontWeight: "bold", textDecoration: "underline" }} > Cost Breakdown </p> <Table> <TableHead> <TableRow> <TableCell /> <TableCell style={{ minWidth: 200, maxWidth: 200 }} align="right" > {" "} {clinicOne.type} </TableCell> <TableCell style={{ minWidth: 200, maxWidth: 200 }} align="right" > {clinicTwo.type} </TableCell> </TableRow> </TableHead> <TableBody> <TableRow> <TableCell component="th" scope="row"> <span style={{ fontWeight: "bolder" }}> Name </span> </TableCell> <TableCell component="th" scope="row"> <span style={{ fontWeight: "bolder" }}> {clinicOne.name} </span> </TableCell> <TableCell component="th" scope="row"> <span style={{ fontWeight: "bolder" }}> {" "} {clinicTwo.name} </span> </TableCell> </TableRow> {priceRows.map(row => ( <TableRow key={row.name}> <TableCell component="th" scope="row"> {row.name} </TableCell> <TableCell align="right"> {clinicOne.type === "GP" ? row.gp : row.pc} </TableCell> <TableCell align="right"> {clinicTwo.type === "GP" ? row.gp : row.pc}{" "} </TableCell> </TableRow> ))} </TableBody> </Table> </DialogContent> </Dialog> </Fragment> ) : ( <Fragment>{row.name}</Fragment> )} </TableCell> <TableCell align="right">{row.gp}</TableCell> <TableCell align="right">{row.pc} </TableCell> </TableRow> ))} </TableBody> <TableFooter> <TableCell align="right"> <Button /> </TableCell> <TableCell align="right"> <Button variant="contained" style={{ backgroundColor: "#ff7c01" }} > <Link to={{ pathname: "/ConfirmClinicChoice", state: { choice: clinicOne, formData: this.props.formData } }} > <span style={{ color: "white" }}>Select</span> </Link> </Button> </TableCell> <TableCell align="right"> <Button // style={{ fontSize: "1vw" }} variant="contained" style={{ backgroundColor: "#ff7c01" }} > <Link to={{ pathname: "/ConfirmClinicChoice", state: { choice: clinicTwo, formData: this.props.formData } }} > <span style={{ color: "white" }}>Select</span> </Link> </Button> </TableCell> </TableFooter> </Table> </DialogContent> </Dialog> </div> ); } } export default CompareDialog; 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"; 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} /> </Switch> </div> </Router> ); } } export default App; package.json { "name": "pathway", "version": "0.1.0", "private": true, "dependencies": { "@material-ui/core": "^4.1.3", "@material-ui/icons": "^4.2.1", "@turf/distance": "^6.0.1", "@turf/turf": "^5.1.6", "bootstrap": "^4.3.1", "bootstrap-less": "^3.3.8", "google-maps-react": "^2.0.2", "jw-react-pagination": "^1.1.0", "material-ui": "^0.20.2", "react": "^16.8.6", "react-bootstrap": "^1.0.0-beta.9", "react-dom": "^16.8.6", "react-js-pagination": "^3.0.2", "react-paginate": "^6.3.0", "react-router-dom": "^5.0.1", "react-scripts": "3.0.1", "react-select": "^3.0.4", "react-swipeable-views": "^0.13.3", "turf": "^3.0.14" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "html-loader": "^0.5.5" } } 我正在尝试在对话框中添加一个“选择按钮”，该对话框使用ClinicMap.js内部的Google Map API从组件中弹出。我在CompareDialog.js上实现了相同的“选择按钮”，但... 使用google-maps-react在地图上进行渲染有点受限，因为地图的子级如何渲染。我做了一个小测试项目，并说google-maps-react和react-router有点不兼容。 如果您想更深入地研究，可以使用React开发工具查看在React组件方面正在呈现的内容。 [我认为使用google-maps-react的方法是附加点击处理程序，但这会使react-router的使用更加复杂。 [也许是更简单的方法，您可以尝试google-map-react软件包。它的工作方式略有不同，但可以轻松在地图上渲染几乎所有内容。

如何在antd admin中进行外部API调用

我正在尝试使用git项目https://github.com/zuiidea/antd-admin进行外部API调用。即使尝试了2个多星期，我也无法弄清楚。该软件包正在使用模拟...

this.props.history.push（）跳过中间页

我查看了教程，并从事与路由器相关的小项目。我的项目中现在有3个页面，分别是Login，Verify和Home。在所有页面上，我都有一个提交按钮，例如...

在快递服务的多个React客户中路由

我正在尝试通过一台服务器提供多个React应用，其中每个应用都应在其中进行路由。例如：应用程序1将由'/'访问，然后由'/ about''/ pricing'等访问。app ...] >>

[使用Redux中间件控制反应路由器导航

借助Redux中间件功能，当我离开播放页面时，会显示警告模式。问题是我现在无法控制导航。页面已更改...

React Router无法识别路由，将我重定向到黑屏

我正在使用React Router v4，我注册了一条路由并尝试建立到该路由的链接，但是当我单击该链接或手动键入该链接时，它似乎没有注册内容，甚至无法识别。 ..

React-Router-链接vs重定向vs历史记录

似乎与其他使用方式有些混淆： history.push（'/ some / path' ）我一直在使用React / Router做一个...

将组件作为道具传递给Route与渲染函数中的包装组件之间的区别

路由到这样的组件之间有什么区别： 或 [[