Gitinn Home Explore Help
Register Sign In
u247285
/
city-selector
mirror of https://github.com/Rynxiao/city-selector
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

modify router queryString

Yaohan Hu 6 years ago
parent
c07dde6643
commit
4aa78c6ff8
6 changed files with 48 additions and 10 deletions
Split View Show Diff Stats
  1. 1 1
      public/index.html
  2. 5 3
      src/pages/app/App.js
  3. 8 3
      src/pages/city/City.js
  4. 2 1
      src/pages/city/city.css
  5. 2 1
      src/pages/city/city.scss
  6. 30 1
      src/utils/index.js

+ 1 - 1
public/index.html
View File 

@@ -2,7 +2,7 @@
 
 <html lang="en">
 
   <head>
 
     <meta charset="utf-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=no">
 
     <meta name="theme-color" content="#000000">
 
     <!--
 
       manifest.json provides metadata used when your web app is added to the

+ 5 - 3
src/pages/app/App.js
View File 

@@ -1,5 +1,6 @@
 
 import React, { Component } from 'react';
 
 import { NavBar, List } from 'antd-mobile';
 
+import { parseSearchToState, parseStateToSearch } from '../../utils';
 
 import './App.css';
 
 
 const Item = List.Item;
 
@@ -15,15 +16,16 @@ class App extends Component {
 
 
   componentDidMount = () => {
 
     const { location } = this.props;
 
-    const state = location && location.state;
 
-    state && this.setState(state);
 
+    const search = location && location.search;
 
+    const searchState = parseSearchToState(search);
 
+    searchState && this.setState(searchState);
 
   }
 
 
   gotoChooseCity = (cityCode) => {
 
     const { history } = this.props;
 
     history.push({
 
       pathname: '/city',
 
-      state: { cityCode, ...this.state }
 
+      search: parseStateToSearch({ cityCode, ...this.state })
 
     });
 
   }

+ 8 - 3
src/pages/city/City.js
View File 

@@ -10,7 +10,11 @@ import {
 
     searchCityByName,
 
     transformCityMenuData
 
 } from '../../services/cityServices';
 
-import { throttle } from '../../utils';
 
+import { 
+    throttle,
 
+    parseSearchToState,
 
+    parseStateToSearch
 
+} from '../../utils';
 
 import './city.css';
 
 
 const Item = List.Item;
 
@@ -134,14 +138,15 @@ class City extends Component {
 
         }
 
 
         const { history, location } = this.props;
 
-        const { cityCode, ...rest } = location.state;
 
+        const search = location.search;
 
+        const { cityCode, ...rest } = parseSearchToState(search);
 
         const backCity = typeof city === 'string' ? city : city.city;
 
 
         rest[`city${cityCode}`] = backCity;
 
         saveLocalStorageCity(LASTEST_CITY, backCity);
 
         history.push({
 
             pathname: '/',
 
-            state: { ...rest }
 
+            search: parseStateToSearch({ ...rest })
 
         });
 
     }

+ 2 - 1
src/pages/city/city.css
View File 

@@ -44,7 +44,8 @@
 
     margin-left: 3px; }
 
   .city-list-content {
 
     flex: 1;
 
-    overflow-y: auto; }
 
+    overflow-y: auto;
 
+    -webkit-overflow-scrolling: touch; }
 
   .city-label {
 
     width: 20px;
 
     height: 100%;

+ 2 - 1
src/pages/city/city.scss
View File 

@@ -53,7 +53,8 @@
 
     }
 
     &-list-content {
 
         flex: 1;
 
-        overflow-y: auto; 
+        overflow-y: auto;
 
+        -webkit-overflow-scrolling: touch; 
     }
 
     &-label {
 
         width: 20px;

+ 30 - 1
src/utils/index.js
View File 

@@ -53,11 +53,40 @@ function throttle(fn, wait = 500, period = 1000) {
 
     }
 
 }
 
 
+function parseSearchToState(search) {
 
+    if (!search) {
 
+        return {};
 
+    }
 
+
 
+    return search.substr(1).split('&').reduce((r, m) => {
 
+        const key = m.split('=')[0];
 
+        const value = m.split('=')[1];
 
+        return r[key] = value, r;
 
+    }, {});
 
+}
 
+
 
+function parseStateToSearch(state) {
 
+    if (!state || typeof state !== 'object') {
 
+        return '';
 
+    }
 
+
 
+    const keys = Object.keys(state);
 
+    let search = '';
 
+    for (let key of keys) {
 
+        search += `${key}=${state[key]}&`;
 
+    }
 
+
 
+    search = search === '' ? search : `?${search.substr(0, search.length - 1)}`;
 
+    return search;
 
+}
 
+
 
 export {
 
     isChineseString,
 
     isEnglishString,
 
     saveLocalStorage,
 
     getLocalStorage,
 
     isJSONString,
 
-    throttle
 
+    throttle,
 
+    parseSearchToState,
 
+    parseStateToSearch
 
 }