如何重定向到React/Django中的新博客文章

Question

我正在使用React/Django建立博客网站。这是我的基本新博客组件：

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/博客/blog_id。取而代之的是，该表单才被清除，我必须转到＆lt; link = ='/blog'＆gt; back＆lt;/link＆gt; to Bloglist才能查看新的博客。

现在，我知道使用Django，您可以使用他们的表格发布博客，并且一旦发布，它将重定向到该blog_detail。我的问题是我不知道该如何使用前端的反应。我可以使用某种重定向或路线吗？另外，我不确定我什至如何检索刚刚寄出的博客的ID。

抱歉，如果这不是很多事情要做，我不知道我可以显示的其他代码中的其他内容，这将有助于这个问题，因为逻辑可以发表博客，我只是无法了解该特定的特定内容帖子后博客。

Answer 1

一种解决方案是使Post请求输出刚刚使用其ID创建的新博客对象。

{
    id: #,
    ...

}

因此，您可以只使用React-Router-dom的usenavigate挂钩，然后转到该页面

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;