Question

作为一个概念证明，我正在开发一个支持无限导航的应用程序;也就是说，每个页面都有一个链接列表（作为父级的道具传入），你可以一直点击进入每个后续页面。

这会产生一个类似于mypage/a/b/c/d/e/f/g/...的网址，因为您可以继续进一步导航到应用程序中。我不清楚的是如何在反应路由器中动态生成无限数量的路由。我知道使用react-router，你可以动态加载路由，一种延迟加载的方法，但我无法弄清楚如何继续生成越来越深的路由。

我有一些想法：

将嵌套路由状态存储在redux中，并将其与动态路由结合使用
模式匹配具有/**（未经测试）

Answer 1

我写了JsFiddle that demonstrates infinite nesting。它使用Navigation router而不是React路由器，但我希望您对此持开放态度。您可以看到，我不是手动构建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');

React-Router：无限/动态嵌套

1 个答案: