如何使按钮 link 指向另一个组件？

Question

当我使用 useNavigate 挂钩在我的登录组件中单击按钮时，我试图加载我的注册组件，但是当我在按钮中添加 onClick={navigate('/register', {replace: true})} 时，它使得当我单击登录时 link 在我的导航栏中，它正在加载 /register 而不是我的登录表单。我应该改用 Link 还是我做错了什么？感谢任何帮助，非常感谢！

import React, {useState, useEffect} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {Link, useNavigate} from 'react-router-dom';
import {Formik, Field, Form, ErrorMessage} from 'formik';
import * as Yup from 'yup';
import {login} from '../../slices/auth';
import {clearMessage} from '../../slices/messages';
const Login = (props) => {
    const navigate = useNavigate();
    const [loading, setLoading] = useState(false);
    const {isLoggedIn} = useSelector((state) => state.auth);
    const {message} = useSelector((state) => state.message);
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(clearMessage());
    }, [dispatch]);
    const initialValues = {
        username: '',
        password: '',
    };
    const validationSchema = Yup.object().shape({
        username: Yup.string().required('Please enter your Username'),
        password: Yup.string().required('Please enter your Password'),
    });
    const handleLogin = (formValue) => {
        const {username, password} = formValue;
        setLoading(true);
        dispatch(login({username, password}))
            .unwrap()
            .then(() => {
                navigate('/profile', {replace: true});
            })
            .catch(() => {
                setLoading(false);
            });
    };
    if (isLoggedIn) {
        return <Link to='/profile' />;
    }
    return (
        <div className='login'>
            <div className='form-container'>
                <h1 id='welcome-plate'>Welcome, please Login</h1>
                <div className='button-box'>
                    <div id='btn'>
                        <button type='button' className='toggle-btn' id='login-option'>
                            Login
                        </button>
                        <button
                            type='button'
                            className='toggle-btn'
                            id='register-option'
                            onClick={navigate('/register', {replace: true})}
                        >
                            Register
                        </button>
                    </div>
                </div>
                <Formik
                    initialValues={initialValues}
                    validationSchema={validationSchema}
                    onSubmit={handleLogin}
                >
                    <Form>
                        <div className='login-group'>
                            <Field
                                name='username'
                                type='text'
                                className='form-control'
                                placeholder='User ID'
                            />
                            <ErrorMessage
                                name='username'
                                component='div'
                                id='username-error'
                            />
                        </div>
                        <div className='login-group'>
                            <Field
                                name='password'
                                type='password'
                                className='form-control'
                                placeholder='Enter Password'
                            />
                            <ErrorMessage
                                name='password'
                                component='div'
                                id='password-error'
                            />
                        </div>
                        <div className='login-group'>
                            <button type='submit' className='login-btn' disabled={loading}>
                                {loading && (
                                    <span className='spinner-border spinner-border-sm'></span>
                                )}
                                <span>Login</span>
                            </button>
                        </div>
                    </Form>
                </Formik>
            </div>
            {message && (
                <div className='form-group' id='alert'>
                    <div className='alert alert-danger' role='alert'>
                        {message}
                    </div>
                </div>
            )}
        </div>
    );
};
export default Login;

Answer 1

onClick={navigate('/register', { replace: true })}

这会立即调用 navigate 函数。您想要将回调函数传递给 onClick 处理程序，然后调用 navigate 以发出命令式重定向。

onClick={() => navigate('/register', { replace: true })}

如何使按钮 link 指向另一个组件？

How can I make a button link to another component?

javascript

reactjs

react-router

react-router-dom

react-hooks