Skip to content

Commit

Permalink
change the react router version from 5 to 6
Browse files Browse the repository at this point in the history
  • Loading branch information
NadiaKovalchuk committed Aug 9, 2023
1 parent 86d9224 commit b8b45ef
Show file tree
Hide file tree
Showing 14 changed files with 137 additions and 248 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,5 +31,5 @@ The `Tabs` page should also show a `Tabs` component implemented in [React Tabs](
- Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
- Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
- 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](https://<your_account>.github.io/react_tabs-with-router/) and add it to the PR description.
- Replace `<your_account>` with your Github username in the [DEMO LINK](https://NadiaKovalchuk.github.io/react_tabs-with-router/) and add it to the PR description.

119 changes: 14 additions & 105 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"classnames": "^2.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.4",
"react-router-dom": "^6.3.0",
"react-scripts": "^4.0.3"
},
"devDependencies": {
Expand All @@ -26,7 +26,6 @@
"@types/node": "^17.0.23",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"@types/react-router-dom": "^5.3.3",
"cypress": "^9.5.3",
"eslint": "^7.32.0",
"eslint-plugin-cypress": "^2.11.2",
Expand Down
50 changes: 12 additions & 38 deletions src/App.tsx
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';

Check failure on line 5 in src/App.tsx

View workflow job for this annotation

GitHub Actions / run_linter (14.x)

Missing file extension for "./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>
</>
);
23 changes: 23 additions & 0 deletions src/Root.tsx
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';

Check failure on line 2 in src/Root.tsx

View workflow job for this annotation

GitHub Actions / run_linter (14.x)

Missing file extension for "./Components/HomePage"
import TabsPage from './Components/TabsPage';

Check failure on line 3 in src/Root.tsx

View workflow job for this annotation

GitHub Actions / run_linter (14.x)

Missing file extension for "./Components/TabsPage"
import { App } from './App';
import HomeRedirect from './Components/HomeRedirect';

Check failure on line 5 in src/Root.tsx

View workflow job for this annotation

GitHub Actions / run_linter (14.x)

Missing file extension for "./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>
);
};
4 changes: 2 additions & 2 deletions src/components/Home.tsx → src/components/HomePage.tsx
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;
7 changes: 7 additions & 0 deletions src/components/HomeRedirect.tsx
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;
34 changes: 9 additions & 25 deletions src/components/Navbar.tsx
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;
9 changes: 0 additions & 9 deletions src/components/NotFound.tsx

This file was deleted.

21 changes: 21 additions & 0 deletions src/components/TabItem.tsx
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;
Loading

0 comments on commit b8b45ef

Please sign in to comment.