使用React,React Router和Firebase设置URL参数(useParams或useRouteMatch)?

时间:2020-05-26 15:02:20

标签: reactjs firebase google-cloud-firestore react-router react-router-dom

我正在实施的内容:

我在一个项目中使用React(使用Hooks),React Router和Firebase,并且我想将documentId用作单击文档时的URL。网址看起来像:https://website.com/view-companies/sdf920k1

App.js

<Route path="/view-companies/:documentId" component={ViewCompany} />

我的问题:

我已经在App.js中以:documentId作为参数设置了Route路径,但是我不确定要使用哪个钩子(useParamsuseRouteMatch),以及是否我的设置缺少一些东西。

查询Cloud Firestore并返回7个文档时,我想选择一个文档,并在URL中使用documentId。我曾尝试在Github上为Firebase寻找这种设置的示例,但没有任何运气。

1 个答案:

答案 0 :(得分:3)

点击文档时,您可以使用以下历史记录更新网址

t(levene.r)

P.S。如果您使用的是react-router v6,则可以使用useNavigate代替useHistory

现在,根据您可以使用const Component = () => { const history = useHistory(); const handleClick = (documentId) => { history.push(`/view-companies/${documentId}`); } ... } 获取参数的路线来渲染组件了

useParams