node.js - React Router 不会重定向
问题描述
当我单击链接并将道具传递给组件以显示结果时,我想呈现不同的组件的问题。当我这样做时,应用程序不会进行第一步,即在页面上重定向和安装不同的组件
function SearchFlights() {
const [FlightNumber, setSearchFlightNumber] = useState(0);
const [ArrivalTime, setSearchArrivalTime] = useState(0);
const [DepartureTime, setSearchDeparturetime] = useState(0);
const [DepartureDate, setSearchDepartureDate] = useState(0);
const [ArrivalDate, setSearchArrivalDate] = useState(0);
const [DepartureTerminal, setSearchDepartureTerminal] = useState(0);
const [ArrivalTerminal, setSearchArrivalTerminal] = useState(0);
const [sendRequest, setSendRequest] = useState(false);
const [searchResults, setSearcResults] = useState({})
const obj = {
FlightNumber: FlightNumber,
ArrivalTime: ArrivalTime,
DepartureTime: DepartureTime,
DepartureDate: DepartureDate,
ArrivalDate: ArrivalDate,
ArrivalTerminal: ArrivalTerminal,
DepartureTerminal: DepartureTerminal
}
function handleClick(event) {
event.preventDefault()
axios.post('http://localhost:3001/searchflight', obj).then(() => {
console.log("yes")
setSendRequest(true);
}).catch(err => {
console.log(err)
console.log("i am here")
})
}
useEffect(() => {
axios.get('http://localhost:3001/getresults').then((response) => {
setSearcResults(response.data)
console.log(searchResults);
console.log("i got triggered now")
}).catch(err => {
console.log(err)
console.log("i am here")
})
}, [sendRequest])
return (
<div className="create">
<h2>Search a Flight</h2>
<form>
<label>Enter Flight Number</label>
<input
type="text"
required
// value={flightNumber}
name="flightnumber"
onChange={(e) => setSearchFlightNumber(e.target.value)}
/>
<label>Enter Arrival Time </label>
<input
placeholder="hateb2a date..."
type="text"
// value={arrivalTime}
name="arrivaltime"
onChange={(e) => setSearchArrivalTime(e.target.value)}
/>
<label>Enter Departure Time</label>
<textarea
placeholder="hateb2a date bardo"
// value={departure}
name="departuretime"
onChange={(e) => setSearchDeparturetime(e.target.value)}
></textarea>
<label>Enter Departure Date</label>
<textarea
placeholder="hateb2a date bardo"
// value={departure}
name="departuredate"
onChange={(e) => setSearchDepartureDate(e.target.value)}
></textarea>
<label>Enter Arrival Date</label>
<textarea
required
// value={economySeats}
name="economyseats"
onChange={(e) => setSearchArrivalDate(e.target.value)}
></textarea>
<label>Enter Arrival Terminal</label>
<textarea
required
// value={businessSeats}
name="businessseats"
onChange={(e) => setSearchArrivalTerminal(e.target.value)}
></textarea>
<label>Enter Departure Terminal</label>
<textarea
required
// value={businessSeats}
name="businessseats"
onChange={(e) =>
setSearchDepartureTerminal(e.target.value)}
></textarea>
这是更改 url 的 React Router 步骤
<Link to="/getresults" onClick={handleClick}> Search Flight</Link>
<Switch>
<Route path={"/getresults"} component={SearchResults} />
</Switch>
</Router>
</form>
</div>
);
}
export default SearchFlights;
这是路线文件
import React from "react";
import { Component } from 'react';
import Home from '../src/Components/Home'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import './App.css';
import Flights from './Components/Flights';
import CreateFlight from './Components/CreateFlights';
import SearchFlights from './Components/SearchFlights';
import SearchResults from './Components/SearchResults'
function App() {
const [data, setData] = React.useState(null);
return (
<>
<Router>
<Link to="/"> Home</Link>
<Link to="/viewFlights"> view Flights</Link>
<Link to="/createflight"> create Flight</Link>
<Link to="/searchflight"> Search Flight</Link>
{/* <Navbar /> */}
<Switch>
<Route path="/createFlight" exact component={CreateFlight} />
<Route path="/" exact component={Home} />
<Route path="/viewflights" exact component={Flights} />
<Route path="/searchflight" exact component={SearchFlights} />
<Route path="/getresults" component={SearchResults} />
</Switch>
</Router>
</>
);
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
}
export default App;
解决方案
单击链接时显示的 URL 是什么?
你可能想把
<Route path={"getresults"} component={SearchResults} />
(如果您/
定义了路线)
或者
<Route exact path={"/getresults"} component={SearchResults} />
(对于类似 localhost:xxxx/getresults 的东西)
推荐阅读
- swift - 通过 switch 或 if-else 替换防护
- swift - 编写一个类作为辅助服务并从另一个类调用它
- javascript - 将包含 - 和 + 的数据集放入列表中
- travis-ci - Travis Build 因 docker push 失败
- docker - gitlab-ci.yml & docker-in-docker (dind) & curl 在共享运行器上返回连接被拒绝
- python - 使用 Gremlin Python 驱动程序在 CosmosDB 中删除和填充大图会挂起
- java - 一个例子
,好像不行 - mongodb - 如何在 Mongoose 中使用聚合获得平均值?
- java - 如何克服 ConstraintLayout Guidelines 引起的 Aliasing 问题?
- angular - 如何在 View Angular 6 中按键访问 json 对象值