Optional React Router Param Flagging GET request Error?

Question

EDIT: Posted answer to how I went around this instead of using react-router optional params.

For some reason, I'm having a GET error when I go to the optional react-router route/url with the optional param attached to the URL. I'm trying to track where a user came from by including the optional param SRC to the url. I've tried everything from /ref=testing, /src=testing, /testing as the :referrer? and they'll save probably in localStorage, but still raise the console GET request.

Here is what my App.js looks like:

<Route exact path="/profile/user/:user/:referrer?" component={ ProfileById } />

:user is the user ID in the mongoose structure. :referrer? is the src=(whatever it is)

Here is my axios request for the route:

export const getProfileByUserId = (user) => dispatch => {
dispatch(setProfileLoading());
axios.get(`/profile/user/${user}`)
    .then(res => 
        dispatch({
            type: GET_PROFILE,
            payload: res.data
        })    
    )
    .catch(err => 
        dispatch({
            type: GET_PROFILE,
            payload: null
        })   
    );
}

Here is what's inside my componentDidMount() where I run the axios GET request, and then also check for the optional param and store it in localStorage.

componentDidMount() {
    if (this.props.match.params.user) {
        this.props.getProfileByUserId(this.props.match.params.user);
    }

    if (this.props.match.params.referrer) {
        let referrerString = this.props.match.params.referrer.split('=');
        localStorage.setItem('referrer', referrerString[1])
    }
}

When I load the route, let's say its: /profile/user/20385h1058h385/ref=testing the GET error comes up as: 404 Not found, and then says the error is /ref=testing Well if it's an optional param and I'm not actually requesting a GET on this optional param, why is it coming up?

Any help is appreciated, thanks!

score 0 · Answer 1 · answered Sep 13 '19 at 14:10

0

Please append, only testing instead of ref=testing in the URL. In that case, your URL will be /profile/user/20385h1058h385/testing

We put : for the required parameter and :parameter_name? for the optional parameter.

For example :

<Route path="/login/:p1/:p2?" component={Login} />

Here p1 is the required parameter and p2 is an optional parameter.

And we get these in the componentDidMount method as you are doing.

this.props.match.params.p1

answered Sep 13 '19 at 14:10

Alok Mali

2,821
2
16
32

Thanks for your reply. I've already tried removing the ref= or the src= in the url, and just did the /testing like you mentioned. I tried it again, and it's still getting the 404 GET error. – Buckyx55 Sep 13 '19 at 14:26
Which version of react-router you are using. Please look at this post as well `https://stackoverflow.com/questions/35604617/react-router-with-optional-path-parameter`. Up to version3, there is the same way to pass params, but after version4 the way is slightly different. – Alok Mali Sep 13 '19 at 14:41
I am using React Router V5. Do you know what might be causing the GET error? – Buckyx55 Sep 13 '19 at 17:54
@Buckyx55, I have tested it today with V4. It is working fine for both optional and required parameter. You may have another issue. – Alok Mali Sep 14 '19 at 09:14

score 0 · Accepted Answer · answered Sep 14 '19 at 02:05

I couldn't get it working with a react optional param route, so I just went ahead and did a new URLSearchParams(), made it into a string and then split that string to identify the actual search query. Works on a slash path like: /?src=testing and when it's appended to an existing path.

Here's what I came up with:

if (this.props.location.search) {
        // Check to see if the search address has a location and search query param, if so save in localStorage for referrer source
        //console.log(this.props.location.search);
        let srcParams = new URLSearchParams(this.props.location.search);
        let srcString = srcParams.toString();
        let referrerString = srcString.split('=');
        localStorage.setItem('referrer', referrerString[1]);
    }

Optional React Router Param Flagging GET request Error?

2 Answers2