Rendering component via query parameter with react router

Question

For some requirements of my project I would need to display different page types via query parameter (something like):

http;//myweb.com?parameter=value

Is there a way to do that?

Answer 1

Yes this is possible with react-router-dom

Sample Code:

    const queryParams = [];
    for(let i in this.state.someData){
     queryParams.push(encodeURIComponent(i) + "=" + encodeURIComponent(this.state.someData[i])); // this will create a array of property name and value//
    }
    const queryString = queryParams.join("&"); // Will join the Params with & //

       this.props.history.push({
          pathname:'/yourURL',
          search:'?'+ queryString
       });
    }

Answer 2

One way to display a diffrent component based on the query parameter, you can use switch in the render :

import * as qs from "query-string";

import ComponentA from "./CmponentA";
import ComponentB from "./CmponentB";

...

render(){
  return(
    {
        (() => {
            const parsed = qs.parse(location.search);

            switch(parsed.parameter){
                case 'a' :
                    return <ComponentA />;
                case 'b' :
                    return <ComponentB />;              
            }
        })();
    }

  );
}