0

enter image description here

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

6
  • where is login used ? in the component ? Mar 3, 2022 at 7:00
  • I think.."Login" is just inside the src folder. Mar 3, 2022 at 7:05
  • Can you add the code of that file too ? Mar 3, 2022 at 7:06
  • 1
    The error is in the Login component :S
    – Evert
    Mar 3, 2022 at 7:06
  • 1
    () => { <h1>...</h1> } doesn't return anything either ad a return or remove the braces {} Mar 3, 2022 at 7:13

1 Answer 1

2

Your login component needs return anything.

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

1
  • oh!!! my terrible mistake..thank you very much... Mar 3, 2022 at 7:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.