mate-academy / react_tabs-with-router

React Tabs with Router

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

1. Navigation with Home and Tabs links:
   • should be visible on every page;
   • should highlight an active link with is-active class;
2. 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>

3. Each tab should update the URL on click.
   • the URL should follow the next format /tabs/:tabId (use actual tab.id instead of :tabId);
   • replace <a href="#..."> with <Link to="/tabs/..."> and remove onClick;
   • don't use NavLink as is-active class is added to a parent element;
   • read tabId from the URL using useParams hook;
   • if the tabId does not match any tab show Please select a tab message instead of a tab content.
4. The page should show the same content after a reload.
5. Redirect from /home to / using the Navigate component;
6. Show the Page not found title for all the other URLs;

Instructions

• Install Prettier Extention and use this VSCode settings to enable format on save.
• 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.