Как перенаправить на новую запись в блоге в React/Django

Я создаю сайт блога с помощью React/Django. Вот мой базовый компонент NewBlog:

import React, {useState} from 'react';
import { Link } from 'react-router-dom';

function NewBlog(props) {
    const [title, setTitle] = useState('')
    const [body, setBody] = useState('')
    
    function postBlog() {
        fetch('http://localhost:8000/api/blogs/', {
            "headers": {
                "content-type": "application/json",
            },
            "body": JSON.stringify({
                "title": title,
                "author": 1,
                "body": body
            }),
            "method":"POST",
        })
    }

    return (
        <div>
            <form onSubmit={postBlog}>
            <textarea className='title' placeholder='title...' onChange={(ev) => setTitle(ev.target.value)} value={title}></textarea>
            <textarea className='body' placeholder='' onChange={(ev) => setBody(ev.target.value)} value={body}></textarea>
            <button>POST</button>
            </form>
            <div>
                <Link to='/blog'>BACK</Link>
            </div>
        </div>
    );
}

export default NewBlog;

Это работает, чтобы ПОСТАВИТЬ новый блог, но после отправки формы я не могу понять, как перенаправить на этот конкретный блог, который должен быть просто http://localhost:8000/blogs/BLOG_ID. Вместо этого форма просто очищается, и мне приходится переходить <Link to='/blog'>BACK</Link> в список BlogList, чтобы увидеть новый блог.

Теперь я знаю, что в Django можно использовать их форму для публикации блога, и после публикации он перенаправляется на этот blog_detail. Моя проблема в том, что я не знаю, как это сделать, используя React на фронт-энде. Есть ли какой-то вид перенаправления или маршрута, который я могу использовать? Кроме того, я не уверен, как мне получить id только что опубликованного блога.

Извините, если это не очень много, я не знаю, какой еще кусок моего кода я мог бы показать, который мог бы помочь вопросу, видя, что логика работает для публикации блога, я просто не могу добраться до этого конкретного блога после публикации.

Одним из решений было бы сделать так, чтобы запрос post выводил новый объект блога, который только что был создан, с его id.

{
    id: #,
    ...

}

тогда вы можете просто использовать хук useNavigate из react-router-dom и перейти на эту страницу

import React, {useState} from 'react';
import { Link, useNavigate } from 'react-router-dom';

function NewBlog(props) {
    const [title, setTitle] = useState('')
    const [body, setBody] = useState('')
    const navigate = useNavigate()
    
    function postBlog() {
        fetch('http://localhost:8000/api/blogs/', {
            "headers": {
                "content-type": "application/json",
            },
            "body": JSON.stringify({
                "title": title,
                "author": 1,
                "body": body
            }),
            "method":"POST",
        })
        .then(response => response.json())
        .then(data => {
          navigate(`/blog/${data.id}`) 
        })
    }

    return (
        <div>
            <form onSubmit={postBlog}>
            <textarea className='title' placeholder='title...' onChange={(ev) => setTitle(ev.target.value)} value={title}></textarea>
            <textarea className='body' placeholder='' onChange={(ev) => setBody(ev.target.value)} value={body}></textarea>
            <button>POST</button>
            </form>
            <div>
                <Link to='/blog'>BACK</Link>
            </div>
        </div>
    );
}

export default NewBlog;
Вернуться на верх