React-Router: Infinite/Dynamic nesting

Question

В качестве доказательства концепции я работаю над приложением, которое поддерживает бесконечную навигацию; то есть на каждой странице есть список ссылок (переданных как реквизит от родителя), и вы можете продолжать нажимать на каждую последующую страницу без конца.

Это приведет к URL-адресу, который выглядит так: mypage/a/b/c/d/e/f/g/..., поскольку вы продолжаете все дальше и дальше перемещаться в приложение. Я не понимаю, как динамически генерировать бесконечное количество маршрутов в ответном маршрутизаторе. Я знаю, что с использованием реактивного маршрутизатора вы можете использовать динамические маршруты нагрузки, подход с ленивой нагрузкой, но я не могу понять, как продолжать генерировать более глубокие и более глубокие маршруты.

У меня были некоторые идеи:

• магазин вложенную маршрутизации состояния внутри Redux и использовать его в сочетании с динамической маршрутизации
• модель соответствует маршрут с /** (непроверенные)

Answer 1

Я ve написал a 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');