根据 url 参数设置状态 react-router 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>

然后我想查询 db 以使用 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 方法，可以提供/可选且有效。

例子：

• 路线<Route path="/annonser" element={.....} />
• URL "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 。