Implement the App
with Home
page available at /
and Tabs
page available
at /tabs
. Each page should have the correct title Home page
or Tabs page
.
The Tabs
page should also show a Tabs
component implemented in React Tabs JS
or React Tabs.
Here is the working version
- Navigation with
Home
andTabs
links:- should be visible on every page;
- should highlight an active link with
is-active
class;
TabsPage
page should work for both/tabs
and/tabs/:tabId
paths (use nested routes);<Route path="tabs"> <Route index element={<TabsPage />} /> <Route path=":tabId" element={<TabsPage />} /> </Route>
- Each tab should update the URL on click.
- the URL should follow the next format
/tabs/:tabId
(use actualtab.id
instead of:tabId
); - replace
<a href="#...">
with<Link to="/tabs/...">
and removeonClick
; - don't use
NavLink
asis-active
class is added to a parent element; - read
tabId
from the URL using useParams hook; - if the
tabId
does not match any tab showPlease select a tab
message instead of a tab content.
- the URL should follow the next format
- The page should show the same content after a reload.
- Redirect from
/home
to/
using the Navigate component; - Show the
Page not found
title for all the other URLs;
- Implement a solution following the React task guideline.
- Use the React TypeScript cheat sheet.
- Open one more terminal and run tests with
npm test
to ensure your solution is correct. - Replace
<your_account>
with your Github username in the DEMO LINK and add it to the PR description.