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

Question

我正在尝试进行网站身份验证。我试图将道具传递给延迟加载模块 但突然我遇到了错误“Uncaught (in promise) TypeError: w is not a function”

我正在使用 react 与 apollo 客户端，react 路由器 并且 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) 不是函数。下面是错误信息 “未捕获（承诺中）TypeError：w 不是函数”

我应该如何将 props 传递给延迟加载模块？

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} /> )}
                />