javascript - React-Router:无限/动态嵌套

Question

作为概念证明，我正在开发一个支持无限导航的应用程序；也就是说，每个页面都有一个链接列表(从父页面作为 props 传入)，您可以不断点击进入每个后续页面。

当您不断导航到应用程序时，这将导致如下所示的网址:mypage/a/b/c/d/e/f/g/...。我不清楚的是如何在 react 路由器中动态生成无限数量的路由。我知道使用react-router，您可以动态加载路由，这是一种延迟加载的方法，但我不太清楚如何不断生成越来越深的路由。

我有一些想法:

• 将嵌套路由状态存储在 redux 中，并将其与动态路由结合使用
• 将路由与 /** 进行模式匹配(未经测试)

Answer 1

我写了一个JsFiddle that demonstrates infinite nesting 。它使用 Navigation router而不是 React Router，但我希望你对此持开放态度。您可以看到，我没有手动构建 Url，而是传递一个数组并让导航路由器负责为我构建 Url。每次单击超链接时，我都会向数组添加一个新数字，从而增加 URL 长度。如果您对代码有任何疑问，请告诉我。

// Pass an array for the parts parameter
// Each item in the array represents a segment of the Url
var Add = ({parts, stateNavigator}) => (
  <div>
    <div>Url: {stateNavigator.stateContext.url}</div>
    <div>Clicking Add increases the Url by one each time</div>
    <NavigationReact.RefreshLink
      navigationData={{parts: parts.concat(parts.length)}}
      stateNavigator={stateNavigator}>
      Add
    </NavigationReact.RefreshLink>
  </div>
)

// The * indicates the parts parameter is a splat
// Splats can have infinite segments
var stateNavigator = new Navigation.StateNavigator([
  {key:'infinite', route:'{*parts}', defaults: {parts: [0]}}
]);

// When the infinite state is navigated to render the Add component
// Pass in the current parts data in the props
stateNavigator.states.infinite.navigated = function(data) {
  ReactDOM.render(
    <Add parts={data.parts} stateNavigator={stateNavigator} />,
    document.getElementById('content')
  );
}

stateNavigator.start('/0');