javascript - url 中出现的查询 react

Question

我正在使用 HashRouter 在 React 上制作一个应用程序。在应用程序中，我有一个包含输入的表单，在用户提交数据后，一些数据会出现在 URL 中，如下所示:

http://localhost:3000/?State=Alabama#/profile

当它应该只是

http://localhost:3000/#/profile

提交按钮上的功能只是获取所有值并将其发送到数据库，如下所示:

    handleSubmit() {
        const { userUrl } = this.props;
        let { street_address, state, city, zip, email, phone, avatar, about_message, proximity } = this.state;

        if (this.props.user.title === 'caregiver') {
            axios.put('/update/profile', {
                street_address,
                state,
                city,
                zip,
                email,
                phone,
                avatar: userUrl.length ? userUrl : avatar,
                about_message,
                proximity
            })
                .then(response => {
                    console.log(response);
                    this.setState({
                        street_address,
                        state,
                        city,
                        zip,
                        email,
                        phone,
                        avatar,
                        about_message,
                        proximity
                    })
                })
                .catch(error => console.log(error))
        }
    }

我发现问题部分出在表单中，因为某些输入具有 name=""属性，如果我将其取出，它就不会显示在 URL 中。但问号仍然出现。

Answer 1

您需要阻止表单进行默认提交:

handleSubmit(e) {
        e.preventDefault()
        const { userUrl } = this.props;
        let { street_address, state, city, zip, email, phone, avatar, about_message, proximity } = this.state;

        if (this.props.user.title === 'caregiver') {
            axios.put('/update/profile', {
                street_address,
                state,
                city,
                zip,
                email,
                phone,
                avatar: userUrl.length ? userUrl : avatar,
                about_message,
                proximity
            })
                .then(response => {
                    console.log(response);
                    this.setState({
                        street_address,
                        state,
                        city,
                        zip,
                        email,
                        phone,
                        avatar,
                        about_message,
                        proximity
                    })
                })
                .catch(error => console.log(error))
        }
    }