At a bit of a crossroads here and I cant seen to figure out why. I have a login / registration page where I'm using ref.current?.scrollIntoView({ behavior: 'smooth' }); and it works completely fine, but when I apply the same principle to a different page, it causes the page to reload and add a '?' to the end of the url. I'm not navigating anywhere though, and the console is reading 'No routes matched location ....' although I'm already on that page. Here is the page that works:

const SignIn = () => {

    const ref = useRef(null);
    const log = useRef(null);

    const [showLoader, setShowLoader] = useState(false);

    const { Login } = useContext(AuthContext);
    const { SignUp } = useContext(AuthContext);
    const { ForgotPassword } = useContext(AuthContext)

    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [zipcode, setZipCode] = useState('');
    const [phoneNumber, setPhoneNumber] = useState('');
    const [role, setRole] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleClick = () => {
        ref.current?.scrollIntoView({ behavior: 'smooth' });
    };

    const handleBackClick = () => {
        log.current?.scrollIntoView({ behavior: 'smooth' });
    };
...//
return (
        <div className='signInContainer'>
            <div className='signInPage'>
                <div ref={log} className='signinColContainer'>
                    <div className='loginContainer'>
                        <form className='loginFormContainer' onSubmit={handleLogin}>
                            <h2 className='logHeader'>Welcome back!</h2>
                            <div className='regInputContainer'>
                                <input className='regInput' type="email" placeholder="Email" onChange={(a) => setEmail(a.target.value)} value={email} disabled={showLoader} />
                                <input className='regInput' type="password" placeholder="Password" onChange={(a) => setPassword(a.target.value)} value={password} disabled={showLoader} />
                            </div>
                            <h5 className='forgotPass' onClick={forgotHandler}>Forgot your password?</h5>
                            <h6 className='forgotPassHelper'>Enter your email and click 'Forgot your password?'</h6>
                            <LoadingButton
                                text="Log In"
                                syleName='regBtnStyle'
                                loading={showLoader}
                                disabled={
                                    email === '' ||
                                    password === '' ||
                                    showLoader
                                } />
                        </form>
                    </div>
                    <div className='regBtnContainer'>
                        <div className='regSidePage'>
                            <h2 className='regHeader'>New Here?</h2>
                            <h3 className='regP'>Joining Acquired easy, and takes under a minute! Plus, signing up with up will always be free</h3>
                            <button className="signUpRegBtn" onClick={handleClick}>Sign Up</button>
                        </div>
                    </div>
                </div>
                <div ref={ref} className='signUpColContainer'>
                    <div className='regBtnContainer'>
                        <div className='regSidePage'>
                            <h2 className='regSideHeader'>Remembered you have an account?</h2>
                            <h4 className='regP'>Log in and get your deals closed faster</h4>
                            <button className="signUpRegBtn" onClick={handleBackClick}>Log in</button>
                            <h5 className='orText'>- or -</h5>
..//

This one works perfectly fine every single time, but can someone tell me why this one doesn't? (css is the same for both):

const PostProperty = () => {

    const stepOne = useRef(null);
    const stepTwo = useRef(null);
    const stepThree = useRef(null);
    const stepFour = useRef(null);

    const navigate = useNavigate();

    const handleOneTwo = () => {
        stepTwo.current?.scrollIntoView({ block: "nearest", behavior: 'smooth' });
    };

    const handleTwoOne = () => {
        stepOne.current?.scrollIntoView({ block: "nearest", behavior: 'smooth' });
    };

    return (
        <div className="postPropContainer">
            <div className="postPropBox">
                <div ref={stepOne} className="stepOneContainer">
                    <div className='innerStepContainer'>
                        <form className="propertyAddress">
                            propertyAddress
                            <div>
                                <button onClick={handleOneTwo}>
                                    btn
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div ref={stepTwo} className="stepTwoContainer">
                    <div className='innerStepContainer'>
                        <form className="propertyNumbers">
                            <div>
                                propertyAddress
                                <button >
                                    btn
                                </button>
                                <button onClick={handleTwoOne}>
                                    backbtn
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div ref={stepThree} className="stepThreeContainer">
                    <div className='innerStepContainer'>
                        <form className="propertyDesc">
                            <div>
                                propertyAddress
                                <button >
                                    btn
                                </button>
                                <button >
                                    backbtn
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div ref={stepFour} className="stepFourContainer">
                    <div className='innerStepContainer'>
                        <div className="reviewContainer">
                            <div>
                                reviewContainer
                                <button >
                                    onSubmit
                                </button>
                                <button >
                                    backbtn
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default PostProperty;

CodePudding user response：

Updated the functions to include preventDefault and that fixed it. Functions are now:

const handleOneTwo = (e) => {
        e.preventDefault();
        stepTwo.current?.scrollIntoView({ block: "nearest", behavior: 'smooth' });
    };

CodePudding user response：

Add event.preventDefault and event.stopPropagation to your on click events. So, we can ensure that an event is not bubbling up to the window.