Reactjs 根据 url 参数设置状态 reactrouter v6

发布于06月30日

好的，我有一个表单，用户可以通过键入"单选按钮"搜索输入查询搜索，并用类别填充react Select ，按钮作为链接front end form for clarification

{selectedOption ?
<Link to={`/annonser${typeToRoute}${selectedOptionToRoute}${searchToRoute}`} >
                    <button>Hitta annons / mönster</button>
                    </Link>: <Link to={`/annonser${typeToRoute}${searchToRoute}`} >
                    <button>Hitta annons / mönster</button>

在这里，我想通过useParams钩子查询db，以基于url参数获取数据，然后设置状态

const { type, category, search} = useParams();
    const categoryRef = db.collection("articles").where("subCategory", "==", category)

我希望用户能够单独搜索任何备选方案，我不会使用任何表单验证来确保用户的所有内容都不为空.这样做对吗？因为某些原因，v6中的管线组件中不能有可选参数？有没有其他方法来实现我想要做的事情，或者我是否走在了正确的轨道上？提前谢谢，以前从未做过这样的事.如果我的问题问得不好，请告诉我，因为我在这里没有很多提问经验.

const [searchParams] = useSearchParams(); ... const type = searchParams.get("type"); // "customType" const category = searchParams.get("category"); // "foo" const search = searchParams.get("search"); // "bar" const categoryRef = db.collection("articles").where("subCategory", "==", category)

Reactjs 根据 url 参数设置状态 reactrouter v6

推荐答案

Reactjs相关问答推荐

不同步渲染

是否为Reaction中未使用的组件生成Tailwincss样式？

Redux 工具包不更新状态

如何将 MUI X 数据网格单元格方向更改为行级而不是列级？

Syncfusion：带有 TabItemsDirective 的选项卡组件不显示任何内容

React 状态不更新

无法访问 usefocusEffect 中 const 的更新状态

文本的几个词具有线性渐变 colored颜色 - React native

臭名昭著的测试未包含在 act(...) 中

损坏的图像 React useState

在 React 中使用复选框管理状态

基于标记名的博客详细信息分组没有发生

将props 传递给 NextJS 布局组件

我正在try 使用 cypress 测试我的下拉列表，它 Select 值但不提交它们(手动工作)

React JS：如何判断用户使用的是浏览器 url 还是桌面 electron

useState 在生命周期中的位置

调用 Statsig.updateUser 时 UI 不呈现

如何定制 React 热 toastr ？

当我在其中传递 2 个箭头函数时，为什么我的 onClick 事件不适用于 useState

在视图列表上react 本机无限循环的反弹动画？