Почему страница не перенаправляется после отправки формы?

Question

Итак, у меня есть форма, в которой есть только два текстовых поля и кнопка.Когда пользователь нажимает на кнопку для отправки, у меня есть функция handleSubmit, которая делает аксиос-публикацию в экспресс-файле в бэкэнде.Это все работает, за исключением перенаправления, я console.log данных в app.post в экспресс-файле, и он правильно показывает данные, и он также отображается в базе данных.

Это то, чтоформа выглядит как

<form onSubmit={this.handleSubmit} className="col s12 row">
                <div className="row">
                    <div className="input-field col s6">
                        <input
                            value={this.state.title}
                            type="text"
                            className="validate"
                            onChange={this.handleTitleChange} />
                        <label className="active">Title</label>
                    </div>
                </div>
                <div className="row">
                    <div className="input-field col s6">
                        <textarea
                            id="textarea1"
                            value={this.state.body}
                            className="materialize-textarea"
                            onChange={this.handleBodyChange} />
                        <label className="active">Title</label>
                    </div>
                </div>
                <div className="row">
                    <div className="input-field col s6">
                        <button className="btn waves-effect waves-light" type="submit" name="action">Submit
                            <i className="material-icons right">send</i>
                        </button>
                    </div>
                </div>
            </form>

А вот метод handleSubmit

handleSubmit(event) {
        axios.post('/api/newBlog', this.state)
            .then(res => console.log(res));
    }

И, наконец, код маршрутизатора

app.post('/api/newBlog', (req, res) => {
        console.log(req.body);
        const blogPost = new Blog(req.body);
        blogPost.save();
        res.redirect("/")
    });

Каждый раз, когда я нажимаю кнопку отправки, он перенаправляет меняна той же странице, но с небольшой разницей.Страница новой формы блога - "http://localhost:3000/newblog",, но после нажатия кнопки" Отправить "она перенаправляет меня на" http://localhost:3000/newblog?action=". "Почему в действии отображается «? Action =» и почему он не перенаправляет на «/»?Я определил "/" в моем реакции-маршрутизаторе, и я могу получить его, если я вручную наберу его в URL.

Answer 1

"Почему"? Action = "отображается в URL, и почему он не перенаправляет на" / "? Я определил" / "в моем реакции-маршрутизаторе, и я могу получить его, если я вручнуювведите его в URL. "

==> Потому что по умолчанию метод отправки - Get not Post. (если вы не установили method = 'POST' в теге формы).

Когда нажмете кнопку отправки, будет отправлено все значение тега имеет атрибут name.добавить в URL (если method = get)

В вашем случае <button name='action' ... URL будет youdomain?action=

И вы не установили действие, это означает, что отправка по умолчанию на текущий URL

если вы хотите ручное перенаправление, вы можете использовать: event.preventDefault() в handleSubmit() методе, подобном этому:

handleSubmit(){
event.preventDefault();
// call API here, redirect url...

}

Или добавить событие нажатия кнопки и удалить type = 'submit'

<button onClick={this.handleSubmit.bind(this)}>Submit</button>

Надеюсь, это может помочь вам