Вынесли логику из компонента App в Catalog. Добавили маршрутизацию в main.jsx

src/App.jsx

@@ -1,15 +0,0 @@
-import styles from './App.module.scss'
-
-import Header from './components/header'
-import ProductList from './components/list'
-
-const App = () => {
-	return (
-		<div className={styles.container}>
-			<Header />
-			<ProductList />
-		</div>
-	)
-}
-
-export default App

src/App.module.scss

@@ -1,6 +0,0 @@
-@use './assets/styles/variables' as *;
-
-.container {
-	max-width: 1170px;
-	margin: 0 auto;
-}

src/main.jsx

@@ -1,9 +1,14 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+
+import Catalog from './pages/catalog'
+import Cart from './pages/cart'
 
 createRoot(document.getElementById('root')).render(
-	<StrictMode>
+	<Router>
-		<App />
+		<Routes>
-	</StrictMode>
+			<Route path='/catalog' element={<Catalog />} />
+			<Route path='/cart' element={<Cart />} />
+		</Routes>
+	</Router>
 )

src/pages/catalog/index.jsx

@@ -1,5 +1,15 @@
+import styles from './index.module.scss'
+
+import Header from '../../components/header/index'
+import ProductList from '../../components/list/index'
+
 const Catalog = () => {
-	return <></>
+	return (
+		<div className={styles.container}>
+			<Header />
+			<ProductList />
+		</div>
+	)
 }
 
 export default Catalog

src/pages/catalog/index.module.scss

@@ -0,0 +1,4 @@
+.container {
+	max-width: 1170px;
+	margin: 0 auto;
+}