TabMenu with react-router-dom v6

[mrzurkon]

Hi,

Could someone please explain how to use TabMenu with react-router-dom v6? In v5 you can just do this

Code: Select all

            <div className="col-12 md:col-6">
                <div className="card card-w-title">
                    <h5>TabMenu</h5>
                    <TabMenu model={wizardItems} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
                      <Route exact path={'/menu'} component={PersonalDemo} />
                      <Route path={'/menu/confirmation'} component={ConfirmationDemo} />
                      <Route path={'/menu/payment'} component={PaymentDemo} />
                      <Route path={'/menu/seat'} component={SeatDemo} />
                </div>
            </div>

but in v6 you need to wrap Route with <Routes>

Code: Select all

            <div className="col-12 md:col-6">
                <div className="card card-w-title">
                    <h5>TabMenu</h5>
                    <TabMenu model={wizardItems} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
                    <Routes>
                      <Route exact path={'/menu'} component={PersonalDemo} />
                      <Route path={'/menu/confirmation'} component={ConfirmationDemo} />
                      <Route path={'/menu/payment'} component={PaymentDemo} />
                      <Route path={'/menu/seat'} component={SeatDemo} />
                    </Routes>
                </div>
            </div>

The OnTabChange event cannot see the routes.

cheers.

[Melloware]

Its not `component` anymore its `element` like this...

Code: Select all

<Route exact path={'/menu'} element={<PersonalDemo />} />

[mrzurkon]

thank you very much. that was the issue.