它的返回类型 'void' 不是有效的 JSX 元素

Question

// src/Login.tsx
const Login = () => {
  <h1>Success</h1>;
};

export default Login;

// src/Router.tsx
export default () => {
  const CLIENT_ID = process.env.REACT_APP_KAKAO_API_KEY;
  const REDIRECT_URI = "http://localhost:3000/api/user/kakao/callback";
  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  return (
    <Router>
      <div className="App">
        <Switch>
          <Route exact path="/">
            <h1>
              <a href={KAKAO_AUTH_URL}>
                <Login />
              </a>
            </h1>
          </Route>
          <Route path="/oauth/kakao/callback">
            <Auth />
          </Route>
          <Route path="/profile">
            <Profile />
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

我看到一个错误。“登录”不能用作 JSX 组件。它的返回类型“void”不是有效的 JSX 元素。

我试图在这里引用它，但找不到解决方案。 我应该怎么办？

Answer 1

您的登录组件需要返回任何内容。

// src/Login.tsx
const Login = () => {
  return <h1>Success</h1>;
};