Компонент Routes не обновляется при изменении состояния, console.log показывает противоположное поведение компонента

Question

Я пытаюсь установить базовую авторизацию в моих маршрутах.Тем не менее, я даже не могу изменить компонент, когда флаг загрузки установлен в true или false.Я ясно вижу в console.log, что состояние меняется, флаг загрузки работает правильно.Однако внутри компонента поведение не соответствует в точности тому, что говорит console.log.

Это результат того, что я получаю

routes.js:33 {loading: true, children: undefined}
routes.js:37 not loading

Это мой компонент здесь.

const history = createHistory();

function BaseRouter(loading) {
  console.log(loading); //can see props.loading:true in console
  if (loading === true) {
    console.log("loading");
  } else {
    console.log("not loading"); //always comes here
  }
  return (
    <div>
      <HashRouter>
        <div>
          <Header />
          <Switch>
            <Grid container spacing={8}>
              <Grid item xs />
              <Grid item sm={8}>
                <React.Fragment>
                  <Route exact path="/" component={Home} />
                  <Route exact path="/signup/" component={Signup} />
                  <Route exact path="/userlist/" component={UserList} />
                  <Route exact path="/newuser/" component={NewUserCreated} />
                  <Route exact path="/userupdated/" component={UserUpdated} />
                  <Route exact path="/ticketlist" component={TicketList} />
                  <Route exact path="/createticket" component={StartTicket} />
                  <Route
                    exact
                    path="/ticketdetailview/:id"
                    component={TicketDetail}
                  />
                  <Route exact path="/login" component={CreateTicket} />
                  <Route exact path="/mytickets/" component={MyTickets} />
                  <Route
                    exact
                    path="/createdepartment/"
                    component={CreateDepartment}
                  />
                  <Route
                    exact
                    path="/departmentlist/"
                    component={DepartmentList}
                  />
                  <Route
                    exact
                    path="/updatedepartment/:id"
                    component={EditDepartment}
                  />
                  <Route
                    exact
                    path="/updateuser/:id"
                    render={props => <UpdateUser />}
                  />
                </React.Fragment>
              </Grid>
              <Grid item xs />
            </Grid>
          </Switch>
        </div>
      </HashRouter>
    </div>
  );
}

export default BaseRouter;

Answer 1

Первый аргумент, данный компоненту функции, - это объект, содержащий все реквизиты. Вы можете деструктурировать loading реквизит из этого объекта, или вы будете называть реквизитный объект loading и использовать вместо этого тот, который вам не нужен.

function BaseRouter({ loading }) {
  if (loading) {
    console.log("loading");
  } else {
    console.log("not loading");
  }

  // ...
}