fix(web): 修复页面组件无法获取 props.location.query 的问题 (#1132)

e2e/dummy/src/app.config.js

@@ -1,4 +1,4 @@
-const pages = ['pages/one/index', 'pages/two/index'];
+const pages = ['pages/one/index', 'pages/two/index', 'pages/query/index'];
 
 module.exports.ali = {
   pages,

e2e/dummy/src/pages/query/index.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useQuery } from 'remax';
+import { View } from 'remax/one';
+
+export default props => {
+  const query = useQuery();
+
+  return (
+    <View>
+      <View>query from props: {props.location.query.name}</View>
+      <View>query from hook: {query.name}</View>
+    </View>
+  );
+};

e2e/dummy/src/pages/two/index.js

@@ -1,13 +1,6 @@
 import * as React from 'react';
-import { useQuery } from 'remax';
 import { View } from 'remax/one';
 
 export default () => {
-  const query = useQuery();
-  return (
-    <View>
-      page two
-      <View>{query.q}</View>
-    </View>
-  );
+  return <View>page two</View>;
 };

e2e/dummy/tests/index.test.js

@@ -35,8 +35,9 @@ describe('works', () => {
     await expect(page).toMatch('page two');
   });
 
-  it('useQuery', async () => {
-    await goTo('/pages/two/index?q=query');
-    await expect(page).toMatch('query');
+  it('passes query to page', async () => {
+    await goTo('/pages/query/index?name=foo');
+    await expect(page).toMatch('query from props: foo');
+    await expect(page).toMatch('query from hook: foo');
   });
 });

packages/remax-runtime/src/__tests__/createPageWrapper.test.tsx

@@ -10,8 +10,8 @@ describe('createPageWrapper', () => {
   }
 
   it('get Page ref', () => {
-    const WrappedPage = createPageWrapper(Page, {});
-    const testRenderer = TestRenderer.create(<WrappedPage page={null} />);
+    const WrappedPage = createPageWrapper(Page);
+    const testRenderer = TestRenderer.create(<WrappedPage page={null} query={{}} />);
     const instance = testRenderer.getInstance() as any;
     expect(instance.pageComponentInstance).toBeInstanceOf(Page);
   });
@@ -22,16 +22,16 @@ describe('createPageWrapper', () => {
         return <PageComponent ref={ref} />;
       });
     };
-    const WrappedPage = createPageWrapper(hoc(Page), {});
-    const testRenderer = TestRenderer.create(<WrappedPage page={null} />);
+    const WrappedPage = createPageWrapper(hoc(Page));
+    const testRenderer = TestRenderer.create(<WrappedPage page={null} query={{}} />);
     const instance = testRenderer.getInstance() as any;
     expect(instance.pageComponentInstance).toBeInstanceOf(Page);
   });
 
   it('does not pass ref to FC', () => {
     const FCPage: React.FC = props => <view>hi</view>;
-    const WrappedPage = createPageWrapper(FCPage, {});
-    const testRenderer = TestRenderer.create(<WrappedPage page={null} />);
+    const WrappedPage = createPageWrapper(FCPage);
+    const testRenderer = TestRenderer.create(<WrappedPage page={null} query={{}} />);
     const instance = testRenderer.getInstance() as any;
     expect(instance.pageComponentInstance).toBeNull();
   });

packages/remax-runtime/src/__tests__/index.test.tsx

@@ -627,9 +627,9 @@ it('usePageInstance works', done => {
     }, []);
 
     return <View />;
-  }, {});
+  });
   const container = new Container(p);
-  render(<Page page={{ data: {} }} />, container);
+  render(<Page page={{ data: {} }} query={{}} />, container);
 });
 
 describe('Remax Suspense placeholder', () => {

packages/remax-runtime/src/createPageConfig.ts

@@ -36,14 +36,15 @@ export default function createPageConfig(Page: React.ComponentType<any>, name: s
     lifecycleCallback: {} as any,
 
     onLoad(this: any, query: any) {
-      const PageWrapper = createPageWrapper(Page, query);
+      const PageWrapper = createPageWrapper(Page);
       this.pageId = generatePageId();
 
       this.query = query;
       this.container = new Container(this);
       this.element = createPortal(
         React.createElement(PageWrapper, {
           page: this,
+          query,
           ref: this.wrapperRef,
         }),
         this.container,

packages/remax-runtime/src/createPageConfig.web.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { PullToRefresh } from '@remax/web';
+import qs from 'qs';
 import createPageWrapper from './createPageWrapper';
 import { Lifecycle, callbackName } from './lifecycle';
 
@@ -10,13 +11,13 @@ interface LifeCycleCallback {
 interface PageConfigProps {
   appConfig: any;
   pageConfig: any;
+  location: any;
 }
 
 const DEFAULT_REACH_BOTTOM_DISTANCE = 50;
 
 export default function createPageConfig(Page: React.ComponentType<any>) {
   const page = {
-    query: {},
     lifeCycleCallback: {} as LifeCycleCallback,
     wrapperRef: React.createRef<any>(),
     registerLifecycle(lifeCycle: Lifecycle, callback: () => any) {
@@ -45,7 +46,7 @@ export default function createPageConfig(Page: React.ComponentType<any>) {
     },
   };
 
-  const PageWrapper = createPageWrapper(Page, page.query);
+  const PageWrapper = createPageWrapper(Page);
 
   return class PageConfig extends React.Component<PageConfigProps> {
     constructor(props: any) {
@@ -145,17 +146,19 @@ export default function createPageConfig(Page: React.ComponentType<any>) {
     };
 
     render() {
-      const { appConfig } = this.props;
+      const { appConfig, location } = this.props;
       const { refreshing } = this.state;
       const hasTabBar = !!appConfig.tabBar;
       const className = `remax-page ${hasTabBar ? 'with-tab-bar' : ''}`;
+      const query = qs.parse(location.search, { ignoreQueryPrefix: true });
 
       if (this.isPullDownRefreshEnabled()) {
         return (
           <PullToRefresh onRefresh={this.handleRefresh} refreshing={refreshing} distanceToRefresh={50}>
             <div className={className}>
               {React.createElement(PageWrapper, {
                 page,
+                query,
                 ref: page.wrapperRef,
               })}
             </div>
@@ -167,6 +170,7 @@ export default function createPageConfig(Page: React.ComponentType<any>) {
         <div className={className}>
           {React.createElement(PageWrapper, {
             page,
+            query,
             ref: page.wrapperRef,
           })}
         </div>

packages/remax-runtime/src/createPageWrapper.ts

@@ -10,8 +10,8 @@ export interface PageProps<Q = {}> {
   };
 }
 
-export default function createPageWrapper(Page: React.ComponentType<any>, query: object) {
-  return class PageWrapper extends React.Component<{ page: any }> {
+export default function createPageWrapper(Page: React.ComponentType<any>) {
+  return class PageWrapper extends React.Component<{ page: any; query: any }> {
     // 页面组件的实例
     pageComponentInstance: any = null;
 
@@ -43,7 +43,7 @@ export default function createPageWrapper(Page: React.ComponentType<any>, query:
     render() {
       const props: any = {
         location: {
-          query: query || {},
+          query: this.props.query || {},
         },
       };