去掉重复的路由

src/App.js

@@ -11,13 +11,55 @@ import tomatoGetCmp from './pages/tomato/getComponent';
 import cornGetCmp from './pages/corn/getComponent';
 import wheatGetCmp from './pages/wheat/getComponent';
 
-const rapeList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's'];
+const config =  {
+  rape: {
+    elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's'],
+    getCmp: rapeGetComponent,
+    idxFormater: idx => [Math.floor(idx / 4), idx % 4], 
+  },
 
-const tomatoList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's', 'mu'];
+  tomato: {
+    elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's', 'mu'],
+    getCmp: tomatoGetCmp,
+  },
 
-const cornList = ['n', 'p', 'k', 'zn', 'b'];
+  corn: {
+    elements: ['n', 'p', 'k', 'zn', 'b'],
+    getCmp: cornGetCmp,
+  },
+
+  wheat: {
+    elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 'mn', 'fe'],
+    getCmp: wheatGetCmp,
+  },
+}
+const routes = Object.keys(config).reduce((acc, category) => {
+  const curRoutes = [];
+  const { elements, getCmp, idxFormater } = config[category];
+  elements.forEach((element, idx) => {
+    const Cmp = getCmp(idxFormater ? idxFormater(idx) : idx);
+    curRoutes.push(
+      <Route
+        key={category + '-' + element}
+        exact
+        path={`/${category}/lack-of-${element}`}
+        component={Cmp}
+      />
+    );
+    curRoutes.push(
+      <Route
+        key={category + '-' + element + '-info'}
+        exact
+        path={`/${category}/lack-of-${element}/info`}
+        component={() => <InfoCmp category={category} element={element} />}
+      />
+    );        
+  });
+  
+  return acc.concat(curRoutes);
+}, []);
+console.log(routes);
 
-const wheatList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 'mn', 'fe'];
 
 function App() {
   return (
@@ -28,84 +70,7 @@ function App() {
         <Route exact path="/rape" component={Rape} />
         <Route exact path="/wheat" component={Wheat} />
         <Route exact path="/tomato" component={Tomato} />
-        {
-          rapeList.map((name, idx) => {
-            const Cmp = rapeGetComponent([Math.floor(idx / 4), idx % 4]);
-            return (
-                <Route key={'rape-'+name} exact path={'/rape/lack-of-' + name} component={Cmp} />
-            );
-          })
-        }
-        {
-          rapeList.map(name => (
-            <Route
-              key={'rape'+ name+'info'}
-              exact
-              path={'/rape/lack-of-' + name + '/info'}
-              component={() => <InfoCmp category='rape' element={name} />}
-            />
-          ))
-        }
-        {
-          tomatoList.map((name, idx) => (
-            <Route
-              exact
-              key={'tomato-'+name}
-              path={'/tomato/lack-of-' + name}
-              component={tomatoGetCmp(idx)}
-            />
-          ))
-        }
-        {
-          tomatoList.map((name, idx) => (
-            <Route
-              exact
-              key={'tomato-'+name+'info'}
-              path={'/tomato/lack-of-' + name+'/info'}
-              component={() => <InfoCmp category='tomato' element={name} />}
-            />
-          ))
-        }
-        {
-          cornList.map((name, idx) => (
-            <Route
-              exact
-              key={'corn-'+name}
-              path={'/corn/lack-of-' + name}
-              component={cornGetCmp(idx)}
-            />
-          ))
-        }
-        {
-          cornList.map((name, idx) => (
-            <Route
-              exact
-              key={'corn-'+name+'info'}
-              path={'/corn/lack-of-' + name+'/info'}
-              component={() => <InfoCmp category='corn' element={name} />}
-            />
-          ))
-        }
-        {
-          wheatList.map((name, idx) => (
-            <Route
-              exact
-              key={'wheat-'+name}
-              path={'/wheat/lack-of-' + name}
-              component={wheatGetCmp(idx)}
-            />
-          ))
-        }
-        {
-          wheatList.map((name, idx) => (
-            <Route
-              exact
-              key={'wheat-'+name+'info'}
-              path={'/wheat/lack-of-' + name+'/info'}
-              component={() => <InfoCmp category='wheat' element={name} />}
-            />
-          ))
-        }
+        { routes }
       </Switch>
     </Router>
   );