reactjs - react 路由器，以编程方式导航时传递数据？

Question

我们可以使用

导航到不同的路径

this.props.router.push('/some/path')

有没有办法在导航时发送参数(对象)？

我可以想到其他选项，但想知道是否可以传递对象？

• 我可以嵌入对象的 id 并从服务器重新获取对象 从新页面。

• 或者我可以将对象存储在全局存储中，例如 redux 存储。 (这个对象很快就会从商店中删除。所以我认为一开始就把它放在那里可能不太好)

Answer 1

当前答案已过时。

react 路由器 6:

使用useNavigate Hook :

const navigate = useNavigate();
navigate('/other-page', { state: { id: 7, color: 'green' } });

然后，您可以通过 useLocation Hook 访问“/other-page”中的状态数据:

const {state} = useLocation();
const { id, color } = state; // Read values passed on state

React 路由器 4 或 5:

调用history.push，并传递一个对象作为第二个参数来传递状态:

props.history.push('/other-page', { id: 7, color: 'green' }))

然后，您可以通过以下方式访问“/other-page”中的状态数据:

props.location.state