它的返回类型 '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>
  );
};

I see an error.. 'Login' cannot be used as a JSX component.Its return type 'void' is not a valid JSX element.

I tried to reference it on here, but I can't find a solution. What should I do?

Answer 1

Your login component needs return anything.

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