Реактивная пропа исчезает

Question

Я явно не понимаю что-то здесь, когда речь заходит о реакции / реакции маршрутизатора 4. Я пытаюсь проверить, вошел ли пользователь в систему или нет, чтобы контролировать маршруты пользовательского статуса navbar.Я не могу получить доступ к опоре, она просто исчезает.Может кто-то указать, что я не понимаю?isUserLoggedInServerCheck возвращает значение на сервере, затем возвращает значение на AppServer, однако при CandidateLanding возвращает неопределенное значение.

Путь: Server

onPageLoad(sink => {
  let isUserLoggedInServerCheck = false;
  if (sink.request.cookies.sssr) {
    isUserLoggedInServerCheck = true;
  }

  sink.renderIntoElementById(
    'react-target',
    renderToString(
      <AppServer
        location={sink.request.url}
        isUserLoggedInServerCheck={isUserLoggedInServerCheck}
      />
    )
  );
});

Путь: AppServer

const AppServer = props => {
  const context = {};
  const { location, isUserLoggedInServerCheck } = props;

  return (
    <StaticRouter context={context} location={location} isUserLoggedInServerCheck={isUserLoggedInServerCheck}>
      <div className="application">
        <Switch>
          <Route path="/" exact component={CandidateLanding} />
        </Switch>
      </div>
    </StaticRouter>
  );
};

Путь: CandidateLanding

function CandidateLanding(props) {
  const { location, isUserLoggedInServerCheck } = props;

  return (
    <div>
      <Navbar location={location.path} isUserLoggedInServerCheck={isUserLoggedInServerCheck} />
    </div>
  );
}

const CandidateLandingContainer = withTracker(props => {
  const { isUserLoggedInServerCheck } = props;
  if (Meteor.isServer) {
    return {
      isUserLoggedInServerCheck
    };
  }

  if (Meteor.isClient) {
    return {
      isUserLoggedInServerCheck
    };
  }
})(CandidateLanding);

Answer 1

StaticRouter не предоставит свойство isUserLoggedInServerCheck своим детям. Один из способов добиться этого - использовать контекст реакции . Это исключает необходимость передачи параметра от одного компетентного к другому. Чтобы использовать контекст, вам понадобится экземпляр контекста, const UserLoggedInContext = React.createContext(); поставщик <UserLoggedInContext.Provider value={isUserLoggedInServerCheck}> и, наконец, потребитель (useContext) const isUserLoggedInServerCheck = React.useContext(UserLoggedInContext);, чтобы получить предоставленное значение там, где оно вам нужно.

Пример

const UserLoggedInContext = React.createContext();
const AppServer = props => {
  const context = {};
  const { location, isUserLoggedInServerCheck } = props;

  return (
    <UserLoggedInContext.Provider value={isUserLoggedInServerCheck}>
      <StaticRouter context={context} location={location} >
        <div className="application">
          <Switch>
            <Route path="/" exact component={CandidateLanding} />
          </Switch>
        </div>
        </StaticRouter>
      </UserLoggedInContext.Provider>
    );
};

 // ...

function CandidateLanding(props) {
  const { location } = props;

  return (
    <div>
      <Navbar location={location.path} />
    </div>
  );
}

const CandidateLandingContainer = withTracker(props => {
  const isUserLoggedInServerCheck = React.useContext(UserLoggedInContext);
  if (Meteor.isServer) {
    return {
      isUserLoggedInServerCheck
    };
  }

  if (Meteor.isClient) {
    return {
      isUserLoggedInServerCheck
    };
  }
})(CandidateLanding);

Для получения более подробной информации, пожалуйста, обратитесь к: реагирует контекст

Answer 2

Вы передаете свои реквизиты на StaticRouter, а они никогда не попадают на CandidateLanding компонент.Лучший способ сделать это - использовать функцию рендеринга для маршрута

<Route path="/" exact render={ (props) => <CandidateLanding {...props} anotherProp={ anotherVariable } />} />

. Убедитесь, что вы удалили ненужные реквизиты и из статического маршрутизатора. Источник