React Router 不会重定向

Question

当我单击链接并将道具传递给组件以显示结果时，我想渲染不同的组件的问题。当我这样做时，应用程序不会进行第一步，即在页面上重定向和安装不同的组件

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;

Answer 1

单击链接时显示的 URL 是什么？

你可能想放任何一个

<Route path={"getresults"} component={SearchResults} />（如果您定义了/ 路由）

或

<Route exact path={"/getresults"} component={SearchResults} />（例如 localhost:xxxx/getresults）