Как условно направить компонент в реакцию на основе переменной в маршруте?

Question

Вот краткое изложение того, что я пытаюсь подразумевать:

Существующий маршрут <Route path="/public/reports/:reportid/page/:pageid" component={ PageComponent}/>

Идеалистическое ожидание такого поведения <Route path="/public/reports/:reportid/page/:pageid" component={ `:pageid` === -1 ? IndexPage : PageCompoennt }/>

Для рендеринга PDF в безголовом браузере Я определил маршрут publi c, так как недавно была добавлена ​​страница индекса, хотя у меня есть этот общий маршрут для загрузки отдельной страницы, я хотел бы повторно использовать его для страницы индекса (страница индекса не имеет идентификатор, так что я подумал, что, возможно, я отфильтрую, используя -1, чтобы быть его индексом. Приведенный выше код является несколько идеальным случаем, который я ищу .. Есть ли способ, как это ...?

Answer 1

Вы можете использовать render опору Route:

<Route 
    path="/public/reports/:reportid/page/:pageid" 
    render={(props) => 
        props.match.params.pageid === -1 ? 
            <IndexPage {...props} />: 
            <PageCompoennt {...props} />
    }
/>

Answer 2

Я думаю, что вы должны определить свой маршрут, как показано ниже

<Route path="/public/reports/:reportid/page/:pageid" component={ PageComponent}/>

, и в вашем PageComponent вы должны использовать Pageid для условия, как показано ниже:

if(pageid===-1)
     return <YourFirstComponent />

return <YourSecondComponent />

теперь ваша сложность в вашей компонент, и его чище и более читабельным