javascript - 如何使用嵌套路由向页面添加内容而不用 react-router-v4 删除先前路由的内容？

Question

我正在使用 react-router-v4 官方文档中提供的边栏示例作为灵感 https://reacttraining.com/react-router/web/example/sidebar

1- 所以我的应用程序的初始 URL 将是:localhost:3000/search-page/Lists

2- 我有一个可点击链接列表，点击后会在边栏上显示点击数据，发生这种情况时，URL 会更新:localhost:3000/search-page/Lists/itemList1selected

3- 然后我按下“显示列表编号 2”按钮以显示新列表

4- 我的目标是使用嵌套路由，当我单击“列表编号 2”中的链接时。它会将其附加到从“列表编号 1”中选择的项目下方...并同时更新 URL:localhost:3000/search-page/Lists/itemList1selected/itemList2selected

这是我当前的代码:

class MyComponent extends Component {

  constructor(props) {
   super(props);
     this.state = {
      showListButtonPressed: true
     };
   this.showTheOtherList = this.ShowTheOtherList.bind(this);
  }

  showTheOtherList() {
   this.setState({
     showListButtonPressed: !this.state.showListButtonPressed
   });
  }

 render() {
   const dataList1 = dataFromDataBase
     .allItemsFromList1()
     .map(list1 => ({
       path: `${this.props.match.params.type}/${list1.id}`,
       mainList1: () => (
        <div>
          {`${list1.company}   ${list1.name}   ${list1.price}`}
        </div>
       ),
       sidebarList1: () => (
         <div>
           <h3>item List 1 selected</h3>
             {list1.company}
         </div>
       )
     }));

   const dataList2 = fakeFlightApiDataTesting
     .allItemsFromList2()
     .map(list2 => ({
       path: `${this.props.match.params.type}/${list2.id}`,
       mainList2: () => (
         <div>
           {`${list2.company} ${list2.name} ${list2.price}`}
         </div>
       ),
       sidebarList2: () => (
         <div>
           <h3>item List 2 selected</h3>
            {list2.company}
         </div>
       )
     }));

    return (
       <div style={{ display: 'flex' }}>
         <div style={{ width: '20%' }}>

           {dataList1.map(route => (
             <div>
               <Route
                 key={route.path}
                 path={`/search-page/${route.path}`}
                 exact={route.exact}
                 component={route.sidebarList1}
               />
             </div>
           ))}

           {dataList2.map(route => (
             <div>
               <Route
                 key={route.path}
                 path={`/search-page/${route.path}`}
                 exact={route.exact}
                 component={route.sidebarList2}
              />
             </div>
           ))}
         </div>
         <div>
           // Switch the lists when button is pressed
           {this.state.showListButtonPressed ? (
             <div>
               <ul>
                 {dataList1.map(route => (
                   <li key={route.path}>
                     <Link to={`/search-page/${route.path}`}>
                       {route.mainList1()}
                     </Link>
                   </li>
                 ))}
               </ul>
                <button onClick={this.showTheOtherList}> 
                  Switch Lists
                </button>
             </div>
           ) : (
             <div>
               <ul>
                 {dataList2.map(route => (
                   <li key={route.path}>
                     <Link to={`/search-page/${route.path}`}>
                       {route.mainList2()}
                     </Link>
                   </li>
                 ))}
               </ul>

               <button onClick={this.showTheOtherList}> 
                 switch Lists 
               </button>
             </div>
           )}
         </div>
       </div>
     );
   }
 }

这里有一些截图可以让你有更好的想法:

Answer 1

困难的部分是，由于您使用的是 2 个路径参数，因此它的功能与他们使用的示例并不完全相同。假设您有“n”个 list1 选项和“m”个 list2 选项。这意味着您将有 n x m 条总路线。要让它像这样工作，您需要创建一个与每个 list1 选项结合的 list2 路由。然后 list2 的 path 键看起来像 ${this.props.match.params.type}/${list1.id}/${list2.id} .我认为这也可以通过为 list2 ${this.props.match.url}/${list2.id} 创建路径来实现，但它需要始终首先选择 list1 .

这是一个非常棘手的案例，但我希望对您有所帮助