javascript - 我的 React Router Native 设置可以改进吗？
问题描述
我正在制作一个图书馆类型的应用程序。我的布局是典型的......导航栏-侧边栏-MainContent。我有 100 多本书，每一本书都是它自己的组成部分。在我的根目录中，在我的布局的 MainContent 部分中，我有一个 Switch，其路由到我的应用程序中 Main Content 部分的所有可能屏幕，这些屏幕远远超过 100 个。我在根目录中还有一个 Dialer(Orange BTN) 以便无论用户在哪里，他们都可以输入书名和页面以直接跳转到它（绕过 UI）。我将所有路由作为一个数组放在一个单独的文件中，我从该文件作为自定义钩子导入我的根（Main.js）并从 Switch 内映射它们。这是典型/高效的设置吗？还是不好？性能明智。可以更好吗？
一般导航
拨号器在行动
我的路线清单
[{
path: "/1Tr",
component: Tr1,
itemProps: {
exact: true,
}
},
{
path: "/2Tr",
component: Tr2,
itemProps: {
exact: true,
}
},
{
path: "/3Tr",
component: Tr3,
itemProps: {
exact: true,
}
},
{
path: "/4Tr",
component: Tr4,
itemProps: {
exact: true,
}
},
{
path: "/5Tr",
component: Tr5,
itemProps: {
exact: true,
}
},
{
path: "/6Tr",
component: Tr6,
itemProps: {
exact: true,
}
},
{
path: "/7Tr",
component: Tr7,
itemProps: {
exact: true,
}
},
{
path: "/8Tr",
component: Tr8,
itemProps: {
exact: true,
}
},
{
path: "/9Tr",
component: Tr9,
itemProps: {
exact: true,
}
},
{
path: "/10Tr",
component: Tr10,
itemProps: {
exact: true,
}
},
{
path: "/11Tr",
component: Tr11,
itemProps: {
exact: true,
}
},
{
path: "/12Tr",
component: Tr12,
itemProps: {
exact: true,
}
},
{
path: "/13Tr",
component: Tr13,
itemProps: {
exact: true,
}
},
{
path: "/14Tr",
component: Tr14,
itemProps: {
exact: true,
}
},
{
path: "/15Tr",
component: Tr15,
itemProps: {
exact: true,
}
},
{
path: "/EW",
component: EW,
itemProps: {
exact: true,
}
},
{
path: "/WHR",
component: WHR,
itemProps: {
exact: true,
}
},
{
path: "/FB",
component: FB,
itemProps: {
exact: true,
}
},
{
path: "/GCS",
component: GCS,
itemProps: {
exact: true,
}
},
{
path: "/LV",
component: LV,
itemProps: {
exact: true,
}
},
{
path: "/MCTC",
component: MCTC,
itemProps: {
exact: true,
}
},
{
path: "/MS",
component: MS,
itemProps: {
exact: true,
}
},
{
path: "/SRP",
component: SRP,
itemProps: {
exact: true,
}
},
{
path: "/UAA",
component: UAA,
itemProps: {
exact: true,
}
},
{
path: "/1TG1",
component: TG1_1,
itemProps: {
exact: true,
}
},
{
path: "/1TG2",
component: TG1_2,
itemProps: {
exact: true,
}
},
{
path: "/1TG3",
component: TG1_3,
itemProps: {
exact: true,
}
},
{
path: "/1TG4",
component: TG1_4,
itemProps: {
exact: true,
}
},
{
path: "/1TG5",
component: TG1_5,
itemProps: {
exact: true,
}
},
{
path: "/1TG6",
component: TG1_6,
itemProps: {
exact: true,
}
},
{
path: "/1TG7",
component: TG1_7,
itemProps: {
exact: true,
}
},
{
path: "/1TG8",
component: TG1_8,
itemProps: {
exact: true,
}
},
{
path: "/1TG9",
component: TG1_9,
itemProps: {
exact: true,
}
},
{
path: "/1TG10",
component: TG1_10,
itemProps: {
exact: true,
}
},
{
path: "/1TG11",
component: TG1_11,
itemProps: {
exact: true,
}
},
{
path: "/1TG12",
component: TG1_12,
itemProps: {
exact: true,
}
},
{
path: "/1TG13",
component: TG1_13,
itemProps: {
exact: true,
}
},
{
path: "/1TG14",
component: TG1_14,
itemProps: {
exact: true,
}
},
{
path: "/1TG15",
component: TG1_15,
itemProps: {
exact: true,
}
},
{
path: "/1TG16",
component: TG1_16,
itemProps: {
exact: true,
}
},
{
path: "/1TG17",
component: TG1_17,
itemProps: {
exact: true,
}
},
{
path: "/1TG18",
component: TG1_18,
itemProps: {
exact: true,
}
},
{
path: "/1TG19",
component: TG1_19,
itemProps: {
exact: true,
}
},
{
path: "/1TG20",
component: TG1_20,
itemProps: {
exact: true,
}
},
{
path: "/1TG21",
component: TG1_21,
itemProps: {
exact: true,
}
},
{
path: "/1TG22",
component: TG1_22,
itemProps: {
exact: true,
}
},
{
path: "/1TG23",
component: TG1_23,
itemProps: {
exact: true,
}
},
{
path: "/1TG24",
component: TG1_24,
itemProps: {
exact: true,
}
},
{
path: "/1TG25",
component: TG1_25,
itemProps: {
exact: true,
}
},
{
path: "/1TG26",
component: TG1_26,
itemProps: {
exact: true,
}
},
{
path: "/1TG27",
component: TG1_27,
itemProps: {
exact: true,
}
},
{
path: "/1TG28",
component: TG1_28,
itemProps: {
exact: true,
}
},
{
path: "/1TG29",
component: TG1_29,
itemProps: {
exact: true,
}
},
{
path: "/1TG30",
component: TG1_30,
itemProps: {
exact: true,
}
},
{
path: "/1TG31",
component: TG1_31,
itemProps: {
exact: true,
}
},
{
path: "/1TG32",
component: TG1_32,
itemProps: {
exact: true,
}
},
{
path: "/1TG33",
component: TG1_33,
itemProps: {
exact: true,
}
},
{
path: "/1TG34",
component: TG1_34,
itemProps: {
exact: true,
}
},
{
path: "/1TG35",
component: TG1_35,
itemProps: {
exact: true,
}
},
{
path: "/1TG36",
component: TG1_36,
itemProps: {
exact: true,
}
},
{
path: "/1TG37",
component: TG1_37,
itemProps: {
exact: true,
}
},
{
path: "/1TG38",
component: TG1_38,
itemProps: {
exact: true,
}
},
{
path: "/1TG39",
component: TG1_39,
itemProps: {
exact: true,
}
},
{
path: "/1TG40",
component: TG1_40,
itemProps: {
exact: true,
}
},
{
path: "/1TG41",
component: TG1_41,
itemProps: {
exact: true,
}
},
{
path: "/1TG42",
component: TG1_42,
itemProps: {
exact: true,
}
},
{
path: "/1TG43",
component: TG1_43,
itemProps: {
exact: true,
}
},
{
path: "/1TG44",
component: TG1_44,
itemProps: {
exact: true,
}
},
{
path: "/1TG45",
component: TG1_45,
itemProps: {
exact: true,
}
},
{
path: "/1TG46",
component: TG1_46,
itemProps: {
exact: true,
}
},
{
path: "/1TG47",
component: TG1_47,
itemProps: {
exact: true,
}
},
{
path: "/1TG48",
component: TG1_48,
itemProps: {
exact: true,
}
},
{
path: "/1TG49",
component: TG1_49,
itemProps: {
exact: true,
}
},
{
path: "/1TG50",
component: TG1_50,
itemProps: {
exact: true,
}
},
{
path: "/1TG51",
component: TG1_51,
itemProps: {
exact: true,
}
},
{
path: "/1TG52",
component: TG1_52,
itemProps: {
exact: true,
}
},
{
path: "/2TG1",
component: TG2_1,
itemProps: {
exact: true,
}
},
{
path: "/2TG2",
component: TG2_2,
itemProps: {
exact: true,
}
},
{
path: "/2TG3",
component: TG2_3,
itemProps: {
exact: true,
}
},
{
path: "/2TG4",
component: TG2_4,
itemProps: {
exact: true,
}
},
{
path: "/2TG5",
component: TG2_5,
itemProps: {
exact: true,
}
},
{
path: "/2TG6",
component: TG2_6,
itemProps: {
exact: true,
}
},
{
path: "/2TG7",
component: TG2_7,
itemProps: {
exact: true,
}
},
{
path: "/2TG8",
component: TG2_8,
itemProps: {
exact: true,
}
},
{
path: "/2TG9",
component: TG2_9,
itemProps: {
exact: true,
}
},
{
path: "/2TG10",
component: TG2_10,
itemProps: {
exact: true,
}
},
{
path: "/2TG11",
component: TG2_11,
itemProps: {
exact: true,
}
},
{
path: "/2TG12",
component: TG2_12,
itemProps: {
exact: true,
}
},
{
path: "/2TG13",
component: TG2_13,
itemProps: {
exact: true,
}
},
{
path: "/2TG14",
component: TG2_14,
itemProps: {
exact: true,
}
},
{
path: "/2TG15",
component: TG2_15,
itemProps: {
exact: true,
}
},
{
path: "/2TG16",
component: TG2_16,
itemProps: {
exact: true,
}
},
{
path: "/2TG17",
component: TG2_17,
itemProps: {
exact: true,
}
},
{
path: "/2TG18",
component: TG2_18,
itemProps: {
exact: true,
}
},
{
path: "/2TG19",
component: TG2_19,
itemProps: {
exact: true,
}
},
{
path: "/2TG20",
component: TG2_20,
itemProps: {
exact: true,
}
},
{
path: "/2TG21",
component: TG2_21,
itemProps: {
exact: true,
}
},
{
path: "/2TG22",
component: TG2_22,
itemProps: {
exact: true,
}
},
{
path: "/2TG23",
component: TG2_23,
itemProps: {
exact: true,
}
},
{
path: "/2TG24",
component: TG2_24,
itemProps: {
exact: true,
}
},
{
path: "/2TG25",
component: TG2_25,
itemProps: {
exact: true,
}
},
{
path: "/2TG26",
component: TG2_26,
itemProps: {
exact: true,
}
},
{
path: "/2TG27",
component: TG2_27,
itemProps: {
exact: true,
}
},
{
path: "/2TG28",
component: TG2_28,
itemProps: {
exact: true,
}
},
{
path: "/2TG29",
component: TG2_29,
itemProps: {
exact: true,
}
},
{
path: "/2TG30",
component: TG2_30,
itemProps: {
exact: true,
}
},
{
path: "/2TG31",
component: TG2_31,
itemProps: {
exact: true,
}
},
{
path: "/2TG32",
component: TG2_32,
itemProps: {
exact: true,
}
},
{
path: "/2TG33",
component: TG2_33,
itemProps: {
exact: true,
}
},
{
path: "/2TG34",
component: TG2_34,
itemProps: {
exact: true,
}
},
{
path: "/2TG35",
component: TG2_35,
itemProps: {
exact: true,
}
},
{
path: "/2TG36",
component: TG2_36,
itemProps: {
exact: true,
}
},
{
path: "/2TG37",
component: TG2_37,
itemProps: {
exact: true,
}
},
{
path: "/2TG38",
component: TG2_38,
itemProps: {
exact: true,
}
},
{
path: "/2TG39",
component: TG2_39,
itemProps: {
exact: true,
}
},
{
path: "/2TG40",
component: TG2_40,
itemProps: {
exact: true,
}
},
{
path: "/2TG41",
component: TG2_41,
itemProps: {
exact: true,
}
},
{
path: "/2TG42",
component: TG2_42,
itemProps: {
exact: true,
}
},
{
path: "/2TG43",
component: TG2_43,
itemProps: {
exact: true,
}
},
{
path: "/2TG44",
component: TG2_44,
itemProps: {
exact: true,
}
},
{
path: "/2TG45",
component: TG2_45,
itemProps: {
exact: true,
}
},
{
path: "/2TG46",
component: TG2_46,
itemProps: {
exact: true,
}
},
{
path: "/1Ans",
component: Ans1,
itemProps: {
exact: true,
}
},
{
path: "/2Ans",
component: Ans2,
itemProps: {
exact: true,
}
},
{
path: "/3Ans",
component: Ans3,
itemProps: {
exact: true,
}
},
{
path: "/4Ans",
component: Ans4,
itemProps: {
exact: true,
}
},
{
path: "/5Ans",
component: Ans5,
itemProps: {
exact: true,
}
},
{
path: "/1JL",
component: JL1,
itemProps: {
exact: true,
}
},
{
path: "/2JL",
component: JL2,
itemProps: {
exact: true,
}
},
{
path: "/3JL",
component: JL3,
itemProps: {
exact: true,
}
},
{
path: "/4JL",
component: JL4,
itemProps: {
exact: true,
}
},
{
path: "/5JL",
component: JL5,
itemProps: {
exact: true,
}
},
{
path: "/6JL",
component: JL6,
itemProps: {
exact: true,
}
},
{
path: "/7JL",
component: JL7,
itemProps: {
exact: true,
}
},
{
path: "/8JL",
component: JL8,
itemProps: {
exact: true,
}
},
{
path: "/9JL",
component: JL9,
itemProps: {
exact: true,
}
},
{
path: "/1SC1",
component: SC1_1,
itemProps: {
exact: true,
}
},
{
path: "/1SC2",
component: SC1_2,
itemProps: {
exact: true,
}
},
{
path: "/1SC3",
component: SC1_3,
itemProps: {
exact: true,
}
},
{
path: "/1SC4",
component: SC1_4,
itemProps: {
exact: true,
}
},
{
path: "/1SC5",
component: SC1_5,
itemProps: {
exact: true,
}
},
{
path: "/1SC6",
component: SC1_6,
itemProps: {
exact: true,
}
},
{
path: "/1SC7",
component: SC1_7,
itemProps: {
exact: true,
}
},
{
path: "/1SC8",
component: SC1_8,
itemProps: {
exact: true,
}
},
{
path: "/1SC9",
component: SC1_9,
itemProps: {
exact: true,
}
},
{
path: "/1SC10",
component: SC1_10,
itemProps: {
exact: true,
}
},
{
path: "/1SC11,12",
component: SC1_11_12,
itemProps: {
exact: true,
}
},
{
path: "/1SC13",
component: SC1_13,
itemProps: {
exact: true,
}
},
{
path: "/1SC14",
component: SC1_14,
itemProps: {
exact: true,
}
},
{
path: "/1SC15",
component: SC1_15,
itemProps: {
exact: true,
}
},
{
path: "/1SC16",
component: SC1_16,
itemProps: {
exact: true,
}
},
{
path: "/1SC17",
component: SC1_17,
itemProps: {
exact: true,
}
},
{
path: "/1SC18",
component: SC1_18,
itemProps: {
exact: true,
}
},
{
path: "/2SC1",
component: SC2_1,
itemProps: {
exact: true,
}
},
{
path: "/2SC2",
component: SC2_2,
itemProps: {
exact: true,
}
},
{
path: "/2SC3,4",
component: SC2_3_4,
itemProps: {
exact: true,
}
},
{
path: "/2SC5,6",
component: SC2_5_6,
itemProps: {
exact: true,
}
},
{
path: "/2SC7,8",
component: SC2_7_8,
itemProps: {
exact: true,
}
},
{
path: "/2SC9",
component: SC2_9,
itemProps: {
exact: true,
}
},
{
path: "/2SC10",
component: SC2_10,
itemProps: {
exact: true,
}
},
{
path: "/2SC11",
component: SC2_11,
itemProps: {
exact: true,
}
},
{
path: "/3SC1",
component: SC3_1,
itemProps: {
exact: true,
}
},
{
path: "/3SC2",
component: SC3_2,
itemProps: {
exact: true,
}
},
{
path: "/3SC3,4",
component: SC3_3_4,
itemProps: {
exact: true,
}
},
{
path: "/3SC5,6",
component: SC3_5_6,
itemProps: {
exact: true,
}
},
{
path: "/3SC7",
component: SC3_7,
itemProps: {
exact: true,
}
},
{
path: "/3SC8-10",
component: SC3_8_10,
itemProps: {
exact: true,
}
},
{
path: "/3SC11,12",
component: SC3_11_12,
itemProps: {
exact: true,
}
},
{
path: "/4SC1-3",
component: SC4_1_3,
itemProps: {
exact: true,
}
},
{
path: "/4SC4-9",
component: SC4_4_9,
itemProps: {
exact: true,
}
},
{
path: "/4SC10-12",
component: SC4_10_12,
itemProps: {
exact: true,
}
},
{
path: "/5SC1-5",
component: SC5_1_5,
itemProps: {
exact: true,
}
},
{
path: "/5SC6-12",
component: SC5_6_12,
itemProps: {
exact: true,
}
},
{
path: "/6SC1-6",
component: SC6_1_6,
itemProps: {
exact: true,
}
},
{
path: "/6SC7-12",
component: SC6_7_12,
itemProps: {
exact: true,
}
},
{
path: "/7SC1-6",
component: SC7_1_6,
itemProps: {
exact: true,
}
},
{
path: "/7SC7-12",
component: SC7_7_12,
itemProps: {
exact: true,
}
},
{
path: "/8SC1-12",
component: SC8_1_12,
itemProps: {
exact: true,
}
},
{
path: "/9SC1-12",
component: SC9_1_12,
itemProps: {
exact: true,
}
},
{
path: "/10SC1",
component: SC10_1,
itemProps: {
exact: true,
}
},
{
path: "/10SC2",
component: SC10_2,
itemProps: {
exact: true,
}
},
{
path: "/13SC11,12",
component: SC13_11_12,
itemProps: {
exact: true,
}
},
{
path: "/1SR",
component: SR1,
itemProps: {
exact: true,
}
},
{
path: "/2SR",
component: SR2,
itemProps: {
exact: true,
}
},
{
path: "/",
component: Home,
previousScreen: "/",
itemProps: {
exact: true
}
},
]
我的根目录中的布局
<View>
<View>
/*MAINCONTENT*/
<Switch>
{routesList.map((item, index) => <Route path={item.path} key={index} render={() => <item.component {...item.itemProps} />} />)}
</Switch>
</View>
/*NAVBAR*/
<View>
<Navbar/>
</View>
/*SIDEBAR*/
<NativeRouter>
<Sidebar/>
</NativeRouter>
</View>
解决方案
推荐阅读
- pandas - 通过将行与另一个数据框匹配来查找列值的 pandas df
- javascript - 调用计算机视觉 OCR 时出现 415 错误
- c# - 静态类和 COM 互操作
- python - 将数据框中的系列中的多空间替换为单个空间并将其返回到系列
- c# - 如何计算 mongo 集合中具有相交子集合的项目？
- postgresql - PostgreSQL V12 创建临时表共享内存不足，我可以在磁盘上创建吗？
- python-3.x - 你怎么能用python写呢？
- python - 将每行的第 10 个索引乘以 2
- css - 使用 SVG 形状“8”循环动画
只要 - bash - 如何编辑当前的 shell 命令而不执行它？