javascript - 如何在 React Native 中将多个 Route 压缩为 1 个？
问题描述
我的根文件是 App.js，紧随其后的是我的 Main.js 文件。在我的 Main.js 中，我有很多这样的路线......
<Switch>
<Route exact path="/publications" render={(props) => <Publications router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/tg1" render={(props) => <TG1 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/tg2" render={(props) => <TG2 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/ans" render={(props) => <Ans router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/tracts" render={(props) => <Tracts router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/miscellaneous" render={(props) => <Miscellaneous router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/jezLetters" render={(props) => <JezLetters router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/oldCodes" render={(props) => <OldCodes router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1Tr" render={(props) => <Tract1 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2Tr" render={(props) => <Tract2 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/3Tr" render={(props) => <Tract3 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/4Tr" render={(props) => <Tract4 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/5Tr" render={(props) => <Tract5 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/6Tr" render={(props) => <Tract6 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/7Tr" render={(props) => <Tract7 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/8Tr" render={(props) => <Tract8 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/9Tr" render={(props) => <Tract9 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/10Tr" render={(props) => <Tract10 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/11Tr" render={(props) => <Tract11 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/12Tr" render={(props) => <Tract12 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/13Tr" render={(props) => <Tract13 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/14Tr" render={(props) => <Tract14 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/15Tr" render={(props) => <Tract15 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/EW" render={(props) => <EW router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/WHR" render={(props) => <WHR router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/FB" render={(props) => <FB router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/GCS" render={(props) => <GCS router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/LV" render={(props) => <LV router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/MCTC" render={(props) => <MCTC router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/MS" render={(props) => <MS router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/SRP" render={(props) => <SRP router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/UAA" render={(props) => <UAA router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG1" render={(props) => <TG1_1 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG2" render={(props) => <TG1_2 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG3" render={(props) => <TG1_3 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG4" render={(props) => <TG1_4 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG5" render={(props) => <TG1_5 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG6" render={(props) => <TG1_6 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG7" render={(props) => <TG1_7 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG8" render={(props) => <TG1_8 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG9" render={(props) => <TG1_9 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG10" render={(props) => <TG1_10 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG11" render={(props) => <TG1_11 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG12" render={(props) => <TG1_12 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG13" render={(props) => <TG1_13 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG14" render={(props) => <TG1_14 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG15" render={(props) => <TG1_15 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG16" render={(props) => <TG1_16 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG17" render={(props) => <TG1_17 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG18" render={(props) => <TG1_18 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG19" render={(props) => <TG1_19 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG20" render={(props) => <TG1_20 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG21" render={(props) => <TG1_21 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG22" render={(props) => <TG1_22 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG23" render={(props) => <TG1_23 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG24" render={(props) => <TG1_24 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG25" render={(props) => <TG1_25 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG26" render={(props) => <TG1_26 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG27" render={(props) => <TG1_27 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG28" render={(props) => <TG1_28 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG29" render={(props) => <TG1_29 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG30" render={(props) => <TG1_30 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG31" render={(props) => <TG1_31 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG32" render={(props) => <TG1_32 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG33" render={(props) => <TG1_33 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG34" render={(props) => <TG1_34 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG35" render={(props) => <TG1_35 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG36" render={(props) => <TG1_36 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG37" render={(props) => <TG1_37 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG38" render={(props) => <TG1_38 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG39" render={(props) => <TG1_39 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG40" render={(props) => <TG1_40 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG41" render={(props) => <TG1_41 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG42" render={(props) => <TG1_42 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG43" render={(props) => <TG1_43 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG44" render={(props) => <TG1_44 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG45" render={(props) => <TG1_45 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG46" render={(props) => <TG1_46 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG47" render={(props) => <TG1_47 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG48" render={(props) => <TG1_48 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG49" render={(props) => <TG1_49 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG50" render={(props) => <TG1_50 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG51" render={(props) => <TG1_51 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1TG52" render={(props) => <TG1_52 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG1" render={(props) => <TG2_1 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG2" render={(props) => <TG2_2 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG3" render={(props) => <TG2_3 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG4" render={(props) => <TG2_4 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG5" render={(props) => <TG2_5 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG6" render={(props) => <TG2_6 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG7" render={(props) => <TG2_7 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG8" render={(props) => <TG2_8 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG9" render={(props) => <TG2_9 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG10" render={(props) => <TG2_10 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG11" render={(props) => <TG2_11 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG12" render={(props) => <TG2_12 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG13" render={(props) => <TG2_13 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG14" render={(props) => <TG2_14 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG15" render={(props) => <TG2_15 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG16" render={(props) => <TG2_16 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG17" render={(props) => <TG2_17 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG18" render={(props) => <TG2_18 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG19" render={(props) => <TG2_19 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG20" render={(props) => <TG2_20 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG21" render={(props) => <TG2_21 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG22" render={(props) => <TG2_22 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG23" render={(props) => <TG2_23 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG24" render={(props) => <TG2_24 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG25" render={(props) => <TG2_25 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG26" render={(props) => <TG2_26 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG27" render={(props) => <TG2_27 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG28" render={(props) => <TG2_28 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG29" render={(props) => <TG2_29 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG30" render={(props) => <TG2_30 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG31" render={(props) => <TG2_31 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG32" render={(props) => <TG2_32 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG33" render={(props) => <TG2_33 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG34" render={(props) => <TG2_34 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG35" render={(props) => <TG2_35 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG36" render={(props) => <TG2_36 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG37" render={(props) => <TG2_37 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG38" render={(props) => <TG2_38 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG39" render={(props) => <TG2_39 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG40" render={(props) => <TG2_40 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG41" render={(props) => <TG2_41 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG42" render={(props) => <TG2_42 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG43" render={(props) => <TG2_43 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG44" render={(props) => <TG2_44 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG45" render={(props) => <TG2_45 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/2TG46" render={(props) => <TG2_46 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/Ans1" render={(props) => <Ans1 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/Ans2" render={(props) => <Ans2 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/Ans3" render={(props) => <Ans3 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/Ans4" render={(props) => <Ans4 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/Ans5" render={(props) => <Ans5 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/JL1" render={(props) => <JL1 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/JL2" render={(props) => <JL2 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/JL3" render={(props) => <JL3 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/JL4" render={(props) => <JL4 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/JL5" render={(props) => <JL5 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/JL6" render={(props) => <JL6 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/JL7" render={(props) => <JL7 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/JL8" render={(props) => <JL8 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/JL9" render={(props) => <JL9 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route exact path="/1SC1" render={(props) => <SC1_1 router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
<Route path="/" render={(props) => <Home router={props} backButtonUpdate={(value) => setBackButtonState(value)} />} />
</Switch>
我正在制作一个图书馆应用程序，您在这里看到的每条路线都是一本书。有没有办法让我更整洁/更有效地做到这一点？换句话说，我可以将所有路线压缩成 1 条路线，然后只加载需要的内容吗？有人建议我把所有东西都放在一个集合中，就像一个单独的组件中的对象一样，然后通过道具加载所有东西，但我真的不明白如何执行这个建议。
解决方案
推荐阅读
- beautifulsoup -
使用 beautifulsoup 从 html 解析数据中提取记录 - create-react-app - 卸载 Expo CLI
- arrays - 无法在 Swift 4.2 中将类型“[UITableViewCell.Type]”的值转换为“[_.Type]”
- django - 搜索鹡鸰图像
- java - Java中的字符串数组赋值
- php - 无法获取cookie值php
- c# - 实体框架：RowVersion 值为空
- android - 如何在 Android O 中每分钟运行一次后台服务？
- javascript - Vue vee-validate 使用路由器链接按钮验证输入表单
- html - 为 fontawesome 图标添加白色背景