React Router Dom，将id传递为url参数或状态的区别

Question

这更像是一个民意调查。当使用React时，您是通过将它们链接到URL还是作为state来传递路由参数?

是否有最佳实践可以遵循?

参数:

navigate('/edit/${user.id}')`

状态:

navigate('/edit', { state : {id :user.id} } )

Answer 1

对我来说，这取决于我要做的行动。

如果我想要一个带有一些动态信息的路由，比如我不想存储在URL中的聊天id，我更喜欢将其设置为历史状态。

但是，对于REST操作(编辑/添加等)，我更喜欢在URL本身链接id。它有一些好处。我看到的主要是，您可以复制URL，将其粘贴到其他地方(不同的计算机/浏览器)，并且您仍然可以访问与您链接的id的详细信息相同的页面。

Answer 2

这取决于您喜欢什么以及您的项目需要什么。两者的区别如下:

1. navigate('/edit', { state : {id :user.id} })不会在url中写入id。你在useLocation钩子的帮助下使用它，像这样:

import { useLocation } from "react-router-dom";
function Edit() {
const { state } = useLocation();
return (
<div>
{state.id}
</div>
);
}
export default Edit;

它是更灵活的，你可以或不通过id。例如，当你从login页面导航时，你可以传递它，但在其他情况下不可以。

2. navigate('/edit/${user.id}')意味着您在设置路由时已经定义了slug，如下所示:

<Route path = "/edit/:id" element= {<Edit/>}/>

使用useParmas钩子:

import { useParams } from "react-router-dom";
function Edit() {
const { id } = useParams();
return (
<div>
{id}
</div>
);
}
export default Edit;

在最后一种情况下，id应该一直在那里，以形成正确的path。