не перенаправляет на нужный компонент

Question

Я установил маршруты для дочерних компонентов в следующем родительском компоненте как sho

const AdminPage = props => (
    <div>
     //some other code
     <Switch>
         //some other routes
         <Route
            exact
            path = path={props.match.url + "/flights/:flightNumber/passengers"}
            component={PassengersPage}
         />
         <Route exact path="/add-passenger" component={PassengerAddPage} />
     </Switch>
   </div>
);

export default AdminPage;

Ниже приводится дочерний компонент PassengersPage

import { Redirect } from "react-router-dom";

class PassengersPage extends React.Component {
   state = {
     redirectToAddPassengerPage: false
   };
    render() {
       return (
         <>
           {this.state.redirectToAddCoursePage && <Redirect to="add-passenger" />}
           //some presentational JSX

           <button
              style={{ marginBottom: 20 }}
              className="btn btn-primary add-course"
              onClick={() => {
              this.setState({ redirectToAddPassengersPage: true });
              }}
            >
              Add Passenger
           </button>
         </>
        );
    }
 }

Но при нажатии кнопки ничего не происходит , В консоли также нет журналов ошибок. Пожалуйста, помогите.

Answer 1

У вас есть два состояния, одно из которых управляет перенаправлением, но оно не устанавливается при нажатии кнопки:

class PassengersPage extends React.Component {
  state = {
    redirectToAddPassengerPage: false
  };
  render() {
    return (
      <>
        // This next line needs to be changed to 'redirectToAddPassengersPage'
        {this.state.redirectToAddPassengersPage && <Redirect to="add-passenger" />}

        <button
          style={{ marginBottom: 20 }}
          className="btn btn-primary add-course"
          onClick={() => {
          this.setState({ redirectToAddPassengersPage: true });
          }}
        >
          Add Passenger
        </button>
      </>
    );
  }
}

Answer 2

Вы обновляете redirectToAddPassengersPage в состоянии, но проверяете состояние в redirectToAddPassengersPage.

Попробуйте обновить код, как показано ниже

{this.state.redirectToAddPassengerPage && <Redirect to="/add-passenger" />}

Answer 3

Попробуйте использовать пу sh метод истории. Также попробуйте извлечь щелчок, чтобы установить состояние, и при обратном вызове используйте pu sh, чтобы перенаправить на нужный путь.

clickHandler = () => {
        this.setState({ redirectToAddPassengersPage: true },
                          () => {
                             this.props.history.push("/add-passenger");
        })
}

Или, используя свой подход, попробуйте передать push = {true } . Что-то вроде

<Redirect to="/add-passenger" push={true}/>