TabMenu with react-router-dom v6

UI Components for React
Post Reply
mrzurkon
Posts: 4
Joined: 02 Jul 2022, 01:06

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

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
Posts: 3247
Joined: 22 Apr 2013, 15:48

04 Jul 2022, 14:29

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

Code: Select all

<Route exact path={'/menu'} element={<PersonalDemo />} />
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

mrzurkon
Posts: 4
Joined: 02 Jul 2022, 01:06

11 Jul 2022, 07:30

thank you very much. that was the issue.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest