javascript - 查询出现在URL react

我正在使用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中。但是问号仍在出现。

最佳答案

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

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))
        }
    }