在这里有点十字路口，我看不出为什么。我有一个登录/注册页面，我使用ref.current?.scrollIntoView({ behavior: 'smooth' });，它的工作完全正常，但当我把同样的原则应用到不同的页面，它导致页面重新加载，并添加一个'？'到url的结尾。我没有导航到任何地方，虽然。控制台阅读“No routes matched location....”，尽管我已经在那个页面上了。下面是工作的页面：

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

这一个每次都运行得很好，但是有人能告诉我为什么这个不行吗？（两个css都是一样的）：

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;