Prime Community Forum

Posted: **04 Jul 2022, 07:37**

Hi,

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

            <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.

Posted: **04 Jul 2022, 14:29**

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

Code: Select all

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

Posted: **11 Jul 2022, 07:30**

thank you very much. that was the issue.

Prime Community Forum

TabMenu with react-router-dom v6

TabMenu with react-router-dom v6

Re: TabMenu with react-router-dom v6

Re: TabMenu with react-router-dom v6