fix pageName

src/components/App.tsx

@@ -4,42 +4,54 @@ import Header from './Header/Header';
 import Footer from './Footer/Footer';
 import Router from './Router';
 import {BrowserRouter, Switch, Route, Redirect, useParams, useLocation} from 'react-router-dom';
-import { Item } from '../model';
+import {Item} from '../model';
 
 const useQuery = () => {
     return new URLSearchParams(useLocation().search);
 }
 
-const RouterWithPageParam = ({items, releases}: {items: Item[], releases: string[]}) => {
+const RouterWithPageParam = ({items, releases}: { items: Item[], releases: string[] }) => {
-  const { page } = useParams();
+    const {page} = useParams();
     const query = useQuery();
 
     return <Router pageName={page} search={query.get('search') || ''} items={items} releases={releases}/>;
 };
 
-export default function App({items, releases}: {items: Item[], releases: string[]}) {
+const HeaderWithPageParam = () => {
+    const {page} = useParams();
+
+    return <Header pageName={page}/>
+};
+
+const FooterWithPageParam = ({items}: { items: Item[]}) => {
+    const {page} = useParams();
+
+    return <Footer pageName={page} items={items}/>
+};
+
+export default function App({items, releases}: { items: Item[], releases: string[] }) {
     return (
         <BrowserRouter>
+            <Switch>
+                <Route path={'/techradar/:page(.+).html'}>
                     <div>
                         <div className='page'>
                             <div className='page__header'>
-            <Header pageName='a' />
+                                <HeaderWithPageParam/>
                             </div>
                             <div className={classNames('page__content')}>
-            <Switch>
+                                <RouterWithPageParam items={items} releases={releases}/>
-              <Route path={'/techradar/:page(.+).html'}>
-                <RouterWithPageParam items={items} releases={releases} />
-              </Route>
-              <Route path={'/'}>
-                <Redirect to={'/techradar/index.html'} />
-              </Route>
-            </Switch>
                             </div>
                             <div className='page__footer'>
-            <Footer items={items} pageName='a' />
+                                <FooterWithPageParam items={items}/>
                             </div>
                         </div>
                     </div>
+                </Route>
+                <Route path={'/'}>
+                    <Redirect to={'/techradar/index.html'}/>
+                </Route>
+            </Switch>
         </BrowserRouter>
     );
 }