Routing

e-commerce-app/src/App.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import { App } from './App';
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+    render(<App />);
+    const linkElement = screen.getByText(/learn react/i);
+    expect(linkElement).toBeInTheDocument();
 });

e-commerce-app/src/App.tsx

@@ -1,26 +1,48 @@
-import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { BrowserRouter as Router, Route, NavLink, Routes } from 'react-router-dom';
+import { HomePage } from './pages/HomePage/HomePage';
+import { AboutPage } from './pages/AbouPage/AboutPage';
+import { ErrorPage } from './pages/ErrorPage/ErrorPage';
+import { BasketPage } from './pages/BasketPage/BasketPage';
+import { LoginPage } from './pages/LoginPage/LoginPage';
+import { RegistrationPage } from './pages/RegistrationPage/RegistrationPage';
+import { UserPage } from './pages/UserPage/UserPage';
+import { ProductPage } from './pages/ProductPage/ProductPage';
+import { ProductsPage } from './pages/ProductsPage/ProductsPage';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+export const App = () => {
 
-export default App;
+    return (
+        <Router>
+            <div className="App">
+                <header className="App-header">
+                    <img src={logo} className="App-logo" alt="logo" />
+                    <p>
+                        Edit <code>src/App.tsx</code> and save to reload.
+                    </p>
+                    <NavLink to="/">Home</NavLink>
+                    <NavLink to="/about">About</NavLink>
+                    <NavLink to="/basket">Basket</NavLink>
+                    <NavLink to="/login">Login</NavLink>
+                    <NavLink to="/registration">Registration</NavLink>
+                    <NavLink to="/user">User</NavLink>
+                    <NavLink to="/product">Product</NavLink>
+                    <NavLink to="/products">Products</NavLink>
+                    <NavLink to="*">Error</NavLink>
+                </header>
+            </div>
+            <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/about" element={<AboutPage />} />
+                <Route path="/basket" element={<BasketPage />} />
+                <Route path="/login" element={<LoginPage />} />
+                <Route path="/registration" element={<RegistrationPage />} />
+                <Route path="/user" element={<UserPage />} />
+                <Route path="/product" element={<ProductPage />} />
+                <Route path="/products" element={<ProductsPage />} />
+                <Route path="*" element={<ErrorPage />} />
+            </Routes>
+        </Router>
+    );
+}

e-commerce-app/src/index.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import { App } from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+    document.getElementById('root') as HTMLElement
 );
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

e-commerce-app/src/pages/AbouPage/AboutPage.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const AboutPage: React.FC = () => {
+    return <div>About Page</div>;
+};

e-commerce-app/src/pages/BasketPage/BasketPage.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const BasketPage: React.FC = () => {
+    return <div>Basket Page</div>;
+};

e-commerce-app/src/pages/ErrorPage/ErrorPage.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const ErrorPage: React.FC = () => {
+    return <div>Error Page</div>;
+};

e-commerce-app/src/pages/HomePage/HomePage.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const HomePage: React.FC = () => {
+    return <div>Home Page</div>;
+};

e-commerce-app/src/pages/LoginPage/LoginPage.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const LoginPage: React.FC = () => {
+    return <div>Login Page</div>;
+};

e-commerce-app/src/pages/ProductPage/ProductPage.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const ProductPage: React.FC = () => {
+    return <div>Product Page</div>;
+};

e-commerce-app/src/pages/ProductsPage/ProductsPage.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const ProductsPage: React.FC = () => {
+    return <div>Products Page</div>;
+};

e-commerce-app/src/pages/RegistrationPage/RegistrationPage.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const RegistrationPage: React.FC = () => {
+    return <div>Registration Page</div>;
+};

e-commerce-app/src/pages/UserPage/UserPage.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const UserPage: React.FC = () => {
+    return <div>User Page</div>;
+};