Reactjs React SPA与React router/React router dom的多文档选项卡式界面的代码设计？
我有React-SPA应用程序和React-router/React-router dom导航，这意味着有React-router dom（React-router的附加层）交换机语句，根据路径选择：Reactjs React SPA与React router/React router dom的多文档选项卡式界面的代码设计？,reactjs,user-interface,redux,react-router,tabs,Reactjs,User Interface,Redux,React Router,Tabs,我有React-SPA应用程序和React-router/React-router dom导航，这意味着有React-router dom（React-router的附加层）交换机语句，根据路径选择： <Switch> <Route path='/login' component={LoginPage}/> <Route path='/about' component={AboutPage}/> <Route exact path
<Switch>
<Route path='/login' component={LoginPage}/>
<Route path='/about' component={AboutPage}/>
<Route exact path='/' component={HomePage}/>
<Route path='/sales/orderlist' component={OrderListPage}/>
<Route path='/sales/order' component={() => <OrderPage/>}/>
<Route path='/sales/order/:id' component={() => <OrderPage/>}/>
<Route path='/sales/invoicelist' component={InvoiceListPage}/>
<Route path='/sales/invoice' component={InvoicePage}/>
<Route path='/sales/invoice/:id' component={InvoicePage}/>
</Switch>
}/>
}/>
这种多选项卡GUI非常常见-例如Metasfresh有一个，Lotus Notes有一个，多选项卡界面是Microsoft WPF多文档界面的首选组织（至少在我不久前读到它时是这样）。在reactJS中，您有本地状态（this.state或useState）从父组件（称为props）传递状态，从祖先组件（称为context）传递状态，从应用程序的其他部分（例如redux）传递状态。但所有这些都只是“状态”，根据它你可以在屏幕上呈现你想看到的东西 那么什么是MDI有效？它是一个打开文档的列表（因此您需要在您的状态中的某个位置有一个打开文档的列表，其中的每个元素都应该表示该特定文档的当前状态），以及一个当前打开的文档，它应该位于您的状态中的某个位置。在您的示例中，告诉您哪一个是当前打开的文档的状态是。。。反应路由器的位置 因此，您可以使用redux（或创建自己的存储）并将打开的文档保存在某处
//存储的实例
{
...,
openDocuments：[
{路径：'/sales/invoice/1'，标题：'invoice#1'，…}，
{路径：'/sales/invoice/2'，标题：'发票#2'，…}，
{路径：'/sales/order/13'，标题：'order#13'，…}
],
...
}
//每个openDocument的“path”属性用作该文档的id
//并且在数组中应该是唯一的
useCurrentDocumentState