Рендеринг компонента через параметр запроса с реагирующим маршрутизатором

Question

Для некоторых требований моего проекта мне потребуется отображать разные типы страниц с помощью параметра запроса (что-то вроде):

HTTP; // myweb.com?parameter=value

Есть ли способ сделать это?

Answer 1

Один из способов отображения разностного компонента на основе параметра запроса, вы можете использовать switch в рендере:

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 />;              
            }
        })();
    }

  );
}

Answer 2

Да, это возможно с response-router-dom

Пример кода:

    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
       });
    }