React Tabs with Router
- Replace
<your_account>
with your Github username in the DEMO LINK - Follow the React task guideline
Description
Implement Tabs
component. current
prop sets the active tab by its id
.
let tabs = [
{ id: 'tab-1', title: 'Tab 1', content: 'Some text 1' },
{ id: 'tab-2', title: 'Tab 2', content: 'Some text 2' },
{ id: 'tab-3', title: 'Tab 3', content: 'Some text 3' },
];
<Tabs
tabs={tabs}
currentTabId="tab-2"
/>
- Add 2 pages
Home
andTabs
.HomePage
is shown onlocalhost:3000
and contains a headerHome
.TabsPage
is shown onlocalhost:3000/tabs
and contains a headerTabs
and aTabs
component.
- Add navigation links so you can go to
HomePage
orTabsPage
by clicking one of them.- The navigation should be visible from all the pages.
- An active link should be highlighted.
- When you select a tab the URL should be changed to
/tabs/tab-1
. (wheretab-1
is anid
of a selected tab) - After the page reload you should see a content of the tab matching the
id
from the URL.- If an
id
is not valid or is not set (e.g just/tabs
) don't show any content.
- If an