React route params with default value

Question

I am using react functional component with react router v5 . I am using useParam function to fetch a param. How can I set default value of the param when it is not available or undefined.

My router code

<Switch>
    // ....
    // .... 
    <Route path="/users/:userId?" component={UserInfo} />
    // ....
</Switch>

My component code

export const UserInfo = (props) => {
    const {userId} = useParams()


    // ... other codes 
}

I am getting undefined when calling http://localhost:3000/users/.

Any idea will be helpful.

Do you have another route in your `Switch` that ***should*** match "/users"? — Drew Reese, Jan 12 '21 at 06:30
Can you update your question to include your full `Router` and routes then? I suspect you may just need to adjust the order of some routes. — Drew Reese, Jan 12 '21 at 09:42

Drew Reese · Accepted Answer · 2021-01-12T06:38:37.323

24

If you don't have another route in your Switch that matches "/users", you can just provide a fallback value for the destructured params object for the "/users/:userId" path.

export const UserInfo = (props) => {
    const { userId = /* fallback value */ } = useParams();

    // ... other codes 
}

edited Jan 12 '21 at 06:38

answered Jan 12 '21 at 06:33

Drew Reese

165,259
14
153
181

score 2 · Answer 2 · answered Jan 12 '21 at 06:26

2

Instead of using useParams() function in your router you can use props.match and check the condition.

Instead

const {userId} = useParams()

Use

// assuming 0 is the default value
const userId = props.match?.userId || 0;

answered Jan 12 '21 at 06:26

Malay M

1,659
1
14
22

score 1 · Answer 3 · answered May 15 '23 at 09:36

1

I used it this way:

export const UserInfo = (props) => {
   // assuming 1 is the default value
   const {userId = 1} = useParams()
  // ... other codes 
}

answered May 15 '23 at 09:36

Hesam Marshal

139
1
6

React route params with default value

3 Answers3

Linked