-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
change the react router version from 5 to 6
- Loading branch information
1 parent
86d9224
commit b8b45ef
Showing
14 changed files
with
137 additions
and
248 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,42 +1,16 @@ | ||
import 'bulma/css/bulma.css'; | ||
import '@fortawesome/fontawesome-free/css/all.css'; | ||
import './App.scss'; | ||
import { | ||
BrowserRouter as Router, | ||
Route, | ||
Switch, | ||
Redirect, | ||
} from 'react-router-dom'; | ||
import Home from './components/Home'; | ||
import Navbar from './components/Navbar'; | ||
import Tabs from './components/Tabs'; | ||
import NotFound from './components/NotFound'; | ||
import { Outlet } from 'react-router-dom'; | ||
import NavBar from './Components/NavBar'; | ||
|
||
const 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' }, | ||
]; | ||
|
||
export const App = () => { | ||
return ( | ||
<Router> | ||
<> | ||
<Navbar /> | ||
<div className="section"> | ||
<div className="container"> | ||
<Switch> | ||
<Route exact path="/" component={Home} /> | ||
<Route path="/" render={() => <Tabs tabs={tabs} />} /> | ||
<Route path="/:tabId" render={() => <Tabs tabs={tabs} />} /> | ||
<Redirect from="/home" to="/" /> | ||
<Route path="/tabs/:tabId"> | ||
<NotFound /> | ||
</Route> | ||
</Switch> | ||
</div> | ||
</div> | ||
</> | ||
</Router> | ||
); | ||
}; | ||
export const App = () => ( | ||
<> | ||
<NavBar /> | ||
<div className="section"> | ||
<div className="container"> | ||
<Outlet /> | ||
</div> | ||
</div> | ||
</> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { HashRouter as Router, Route, Routes } from 'react-router-dom'; | ||
import HomePage from './Components/HomePage'; | ||
import TabsPage from './Components/TabsPage'; | ||
import { App } from './App'; | ||
import HomeRedirect from './Components/HomeRedirect'; | ||
|
||
export const Root = () => { | ||
return ( | ||
<Router> | ||
<Routes> | ||
<Route path="/" element={<App />}> | ||
<Route index element={<HomePage />} /> | ||
<Route path="/home" element={<HomeRedirect />} /> | ||
<Route path="/tabs"> | ||
<Route index element={<TabsPage />} /> | ||
<Route path=":tabId" element={<TabsPage />} /> | ||
</Route> | ||
<Route path="*" element={<h1 className="title">Page not found</h1>} /> | ||
</Route> | ||
</Routes> | ||
</Router> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
const Home = () => { | ||
const HomePage = () => { | ||
return <h1 className="title">Home page</h1>; | ||
}; | ||
|
||
export default Home; | ||
export default HomePage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { Navigate } from 'react-router-dom'; | ||
|
||
const HomeRedirect = () => { | ||
return <Navigate to="/" replace />; | ||
}; | ||
|
||
export default HomeRedirect; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,43 +1,27 @@ | ||
/* eslint-disable max-len */ | ||
import classNames from 'classnames'; | ||
import { useState } from 'react'; | ||
import { Link } from 'react-router-dom'; | ||
import { NavLink } from 'react-router-dom'; | ||
|
||
const Navbar = () => { | ||
const [activeLink, setActiveLink] = useState(window.location.pathname); | ||
|
||
const handleLinkClick = (path: string) => { | ||
setActiveLink(path); | ||
}; | ||
const getLinkClass = ({ isActive }: { isActive: boolean }) => classNames('navbar-item', { 'is-active': isActive }); | ||
|
||
const NavBar = () => { | ||
return ( | ||
<nav | ||
className="navbar is-light is-fixed-top is-mobile has-shadow" | ||
data-cy="Nav" | ||
> | ||
<div className="container"> | ||
<div className="navbar-brand"> | ||
<Link | ||
to="/" | ||
onClick={() => handleLinkClick('/')} | ||
className={classNames('navbar-item', { | ||
'is-active': activeLink === '/', | ||
})} | ||
> | ||
<NavLink to="/" className={getLinkClass}> | ||
Home | ||
</Link> | ||
<Link | ||
to="/tabs" | ||
onClick={() => handleLinkClick('/tabs')} | ||
className={classNames('navbar-item', { | ||
'is-active': activeLink === '/tabs', | ||
})} | ||
> | ||
</NavLink> | ||
<NavLink to="/tabs" className={getLinkClass}> | ||
Tabs | ||
</Link> | ||
</NavLink> | ||
</div> | ||
</div> | ||
</nav> | ||
); | ||
}; | ||
|
||
export default Navbar; | ||
export default NavBar; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import React from 'react'; | ||
import { NavLink, useLocation } from 'react-router-dom'; | ||
import classNames from 'classnames'; | ||
import { Tab } from '../types/Tab'; | ||
|
||
interface TabItemProps { | ||
tab: Tab; | ||
} | ||
|
||
const TabItem: React.FC<TabItemProps> = ({ tab }) => { | ||
const location = useLocation(); | ||
const isActive = location.pathname === `/tabs/${tab.id}`; | ||
|
||
return ( | ||
<li data-cy="Tab" className={classNames({ 'is-active': isActive })}> | ||
<NavLink to={`/tabs/${tab.id}`}>{tab.title}</NavLink> | ||
</li> | ||
); | ||
}; | ||
|
||
export default TabItem; |
Oops, something went wrong.