В чем разница между двумя синтаксисами react-router?

Question

[DonorOfLove]

Пишу небольшой проект на реакте и использую в нем react-router версии 6.0.1, и есть вопрос: я прочитал разные статьи, в том числе и официальную, везде по разному описано, как нужно передавать компонент в атрибут element( передавать тег/ передавать компонент)более того, оба этих роута работают, но в определенных условиях(когда и как - не ясно), так вот, прошу вас помочь мне разобраться в различиях двух этих вариантов написания роутов:

<Route path='/' element={MainMenu}/>
<Route path='/BattleGround/*' element={<BattleGround/>}/>

Comments

[Алексей Абрамов]

Может путаете чего, в 6.0.1 компонент передается вторым способом. В 5.0.2 можно было передать обоими способами.

Answer 1

[Denis Masson]

в 6 версии роута работает только со вторым вариантом, а так же там убрали вложености роутеров, детальнее тут

Comments

[DonorOfLove]

спасибо за ответ, однако странное решение с их стороны, ведь в первом варианте можно передавать пропсы на прямую, а во втором приходится постоянно прописывать что-то вроде state={state,setState} и потом в дочернем элемент дополнительно инициализовать стейт

[DonorOfLove]

окей, а почему синтаксис с первым вариантом не удален? Первый вариант все еще валидно использовать, если кейс вынуждает, или скоро синтаксис первого варианта будет удален?

[Алексей Абрамов]

DonorOfLove, первый вариант не работает в 6.0.1

[DonorOfLove]

Алексей Абрамов, у меня работает. Вот так выглядит строчка <Route path='/Map' element={Map(props)}/> и очень даже работает, все компилируется, консоль не ругается, в пакете json актуальная версия роутера(6.0.1), странно, интересно, с чем это связано ?

[Алексей Абрамов]

DonorOfLove, ну в этом примере у тебя сразу срабатывает функция и происходит рендер дочернего компонента (хотя мы даже на него не перешли, а если таких роутов будет 10,20?)