如何将道具传递给延迟加载组件？

Question

I'm trying to make website authentication. I tried to pass props to lazy loading modules but suddenly i encountered error "Uncaught (in promise) TypeError: w is not a function"

I'm using react with apollo client, react router and graphql query is perfectly working and lazy component's rendering too but i can't pass props to lazy loading component

// 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"
              >

I expected that handleAuth(true) will perfectly work but I took error that handleAuth(true) is not a function. below is the error message "Uncaught (in promise) TypeError: w is not a function"

How should I pass props to lazy loading modules?

Answer 1

No rocket science here just pass it props directly to signin component, the reason you are sending the props separately is because those props are those recieved from then route.

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

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