基于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方法，然后全部或无，并且可以提供任何内容，可以提供/可选和有效。

示例：

• 路由＆lt;路由路径=“/annonser” element = {.....}/＆gt;
• url “ annonser？type = casturetype＆amp＆amp; category = foo＆amp; search = bar''

使用 austp.eptryparams 访问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)

查询时未提供任何查询参数，将返回null。