基于url参数设置状态react路由器v6

Question

好的，所以我有这个表单，用户可以在其中查询类型为"的搜索；"单选按钮"；搜索输入和填写类别的反应选择，按钮作为澄清的链接前端表单

{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钩子查询数据库以获得基于url参数的数据，然后设置状态

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

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

Answer 1

如果您想要可选的路由路径参数，请查看此答案，要点是为每个可以匹配的路由声明一个路由。然而，这里的问题是秩序很重要；类型"；将需要提供"；类别"；是可选的；类型"；以及"；类别"；将需要提供"；搜索"；可选。

这里有一个例子说明了为什么这并不理想：

<Route path="/annonser/:type" element={.....} />
<Route path="/annonser/:type/:category" element={.....} />
<Route path="/annonser/:type/:category/:search" element={.....} />

这是可以的，直到你想要"；类型"；以及"；搜索"；。如果你尝试path="/annonser/:type/:search"，那么它与path="/annonser/:type/:category"具有相同的特异性，所以首先列出的路线就是匹配的路线。

使用queryString方法，可以提供all或none，以及介于两者之间的任何内容/可选和有效。

示例：

• 路线<Route path="/annonser" element={.....} />
• 网址"annonser?type=customType&category=foo&search=bar"

使用useSearchParams钩子访问queryString参数。

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)

任何未提供的queryString参数在查询时都将返回null。