How to make click on button send me to another url

Question

So I need to display Home.js at localhost/posts but when i click at button it displays info at the auth.js url how to link button so that if login info is correct it goes to "localhost/posts" and not render its info at base url

auth.js

const Auth = () => {
  const { Userr } = useContext(Gloabaldata);
  const login = async (e) => {
    e.preventDefault();
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
      })
      .catch((error) => {});
  };

  return (
    <>
      {Userr ? (
        <>
          <Home />
        </>
      ) : (
        <>
              <input
                type="email"
                placeholder="Email Address"
                onChange={(event) => {
                  setregisterEmail(event.target.value);
                }}
              />

              <input
                type="password"
                placeholder="Password"
                autoComplete="on"
                onChange={(event) => {
                  setregisterPassword(event.target.value);
                }}
              />
                  <button onClick={login} className="sign-in">
                    SIGN IN
                  </button>
                  <button className="switchmode">
                    <h3>dont have a ACCOUNT ? SIGN UP</h3>
                  </button>
            </form>
          </div>
        </>
      )}
    </>

export default Auth;

What have you tried? Have you implemented any routing/navigation in your app? This needs to be done prior to being able to issue imperative navigation actions to specific pages. The bedrock of your question seems to be about implementing authentication and protected routes. Does this answer your question? https://stackoverflow.com/a/66289280/8690857 — Drew Reese, Jul 22 '22 at 16:01
Sorry, are you saying that you have already implemented routing/navigation in your app and that it is working? So all you need to do now is `navigate` to a new route when authenticated? — Drew Reese, Jul 23 '22 at 22:39

score 1 · Answer 1 · answered Jul 22 '22 at 13:24

I have two ways you could achieve navigation in your react app, the code for which will be written in the handler for your onClick function of the button.

Method 1 This is the beat way to do client side routing in react apps which is to use react-router-dom package. You can find out more about it in the official docs here

Method 2 This is not preferable. Use this if there is no state that you want to preserve between the two location. You can use the property of the window object by writing out window.location = “some URL”

score 0 · Answer 2 · answered Jul 22 '22 at 16:21

if i understood you question correctly, you want to redirect user once authentication succeeds right ?. then use useNavigate hook.

import { useNavigate } from 'react-router-dom'

function AuthComponent() {
  const navigate = useNavigate()

  //...
  //...
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user
      navigate('/posts')
    })
    .catch(console.error)

  //...
}

How to make click on button send me to another url

2 Answers2