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

Question

我正在用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。

对不起，如果这不是很多继续，我不知道我的代码的其他部分，我可以显示，这将有助于问题看到的逻辑工作，以发布一个博客，我只是不能得到那个特定的博客后发布。

Answer 1

一种解决方案是让post请求输出刚刚用其id创建的新blog对象。

{
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;