как передать реквизит на ленивую загрузку компонентов?

Question

Я пытаюсь сделать аутентификацию на сайте. Я пытался передать реквизит ленивым загрузочным модулям но вдруг я столкнулся с ошибкой "Uncaught (в обещании) TypeError: w не является функцией"

Я использую реагировать с клиентом apollo, реагировать маршрутизатор и запрос GraphQl отлично работает и рендеринг ленивый компонент тоже но я не могу передать реквизит ленивому компоненту загрузки

// App.js
const SignIn = lazy(() => import('pages/signin'));

function App(props) {
  // state to represent user signed in to the site
  let [auth, setAuth] = useState(false);

  function handleAuth (boolean) {
    setAuth(boolean);
  }

  return (
    <>
      <main>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route 
              path="/signin"
              auth={auth}
              handleAuth={handleAuth}
              render={props => (<SignIn {...props} /> )}
            />

// signin.js
let auth = props.auth;
let handleAuth = props.handleAuth;

return (
    <ApolloConsumer>
      {client => {
        return (
          <>
            <div className="signin-div">
              <h1>Sign in</h1>

              <form
                onSubmit={async e => {
                  e.preventDefault();
                  const { data } = await client.query({
                    query: SIGNIN_ACCOUNT,
                    variables: { email, password }
                  });
                  if (data.signin) {
                    handleAuth(true);
                  }
                }}
                className="signin-form"
              >

Я ожидал, что handleAuth (true) будет отлично работать, но я допустил ошибку, что handleAuth (true) не является функцией. ниже сообщение об ошибке «Uncaught (в обещании) TypeError: w не является функцией»

Как мне передать реквизит ленивым загрузочным модулям?

Answer 1

Здесь нет науки о ракетах, просто передавайте реквизиты напрямую компоненту входа, причина, по которой вы отправляете реквизиты отдельно, потому что эти реквизиты - те, которые были получены с этого маршрута.

 return (
        <>
          <main>
            <Suspense fallback={<div>Loading...</div>}>
              <Switch>
                <Route exact path="/" component={HomePage} />
                <Route 
                  path="/signin"
                  auth={auth}

                  render={props => (<SignIn handleAuth={handleAuth} {...props} /> )}
                />