如何使用嵌套路由向页面添加内容而不使用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选项.这意味着你将nxm总路线.要使它像这样工作,您需要创建一个list2路由与每个list1选项相结合.然后pathlist2 的键看起来像${this.props.match.params.type}/${list1.id}/${list2.id}.我认为这也可以通过为list2创建路径来实现${this.props.match.url}/${list2.id},但是它需要始终首先选择list1.

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