Question

对于我项目的某些要求，我需要通过查询参数显示不同的页面类型（类似）：

http; // myweb.com?parameter=value

有办法吗？

Answer 1

是的，使用 react-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
       });
    }

Answer 2

一种基于查询参数显示差异组件的方法，可以在渲染器中使用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 />;              
            }
        })();
    }

  );
}

通过带有React Router的查询参数渲染组件

2 个答案: