2

okay so I have this form where the user can query a search with type "radio buttons" search input and a react-select filled with categories, the button works as a link 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>

where I then want to query db to get data based on the url params with useParams hook and then set the state

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

I want the user to be able to search any of the alternatives seperatly aswell I will not use any form validation to make sure the user have everything not null. Is this the right way to go about it? Because you cant have optional params in route component in v6 for some reason? Is there any other way to achieve what im trying to do or am I on the right track? Thanks in advance never done anything like this before. Let me know if my question is asked poorly since I dont have alot of experience asking questions here.

Improve this question
7
  • What are you trying to do? Can you include the relevant code you are trying to use for (a) state, and (b) the path parameters? minimal reproducible example Commented Jun 29, 2022 at 15:47
  • @DrewReese I added some code and text to clarify hope that helps. Commented Jun 29, 2022 at 16:16
  • So is the issue that you've a route, something like path="/annonser/:type/:category/:search", and you want the path params to be optional? If these are optional it might be better to instead use queryString parameters if you just need to access potentially undefined values for the DB query. I.e. path="/annonser" and a URL like "/annonser?type=....&category=....&search=....". Commented Jun 29, 2022 at 16:18
  • @DrewReese yes if thats the correct way to go about it, I know theres a useSearchParams hook maybe thats better in this usecase? I find that hook to be somewhat confusing though. So the issue is more "is this the right way to code this? And if so how do I use optional route params" Commented Jun 29, 2022 at 16:21
  • If you want optional route path parameters then see this answer, the gist being you declare a route for each that can match. The issue here though is that the order matters, "type" would need to be provided for "category" to be optional, and both "type" and "category" would need to be provided for "search" to be optional. Using the queryString method then all or none, and anything between, can be provided and valid. Commented Jun 29, 2022 at 16:25

1 Answer 1

Reset to default
1

If you want optional route path parameters then see this answer, the gist being you declare a route for each that can match. The issue here though is that the order matters, "type" would need to be provided for "category" to be optional, and both "type" and "category" would need to be provided for "search" to be optional.

Here's an example showing why this isn't ideal:

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

This is ok until you want the combination of "type" and "search". If you try path="/annonser/:type/:search" then this has the same specificity as path="/annonser/:type/:category", so whichever route is listed first is the one that'll be matched.

Using the queryString method then all or none, and anything between, can be provided/optional and valid.

Example:

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

Use the useSearchParams hook to access queryString parameters.

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)

Any queryString parameter not provided, when queried, will return null.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.