AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix pageName

Browse Source
This commit is contained in:
Bastian Ike
2021-01-11 15:23:11 +01:00
parent 1541eaf525
commit f3e832ae48
1 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/App.tsx
View File

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