orrisroot
a14bc6dd4b
react-scripts 4 on React 17 no longer builds on a current toolchain. Move to Vite 8 with React 19 and TypeScript 7, and take the same shape the other two converted sites settled on. - react-router-dom v5 -> react-router v8: Switch/Redirect become Routes/Navigate, and withRouter and RouteComponentProps give way to useParams, useLocation and useNavigate - swap the unmaintained dependencies: axios -> ky, react-html-parser -> @orrisroot/react-html-parser, react-ga -> react-ga4, react-helmet -> @dr.pogodin/react-helmet, react-image-lightbox -> yet-another-react-lightbox, moment -> date-fns, and a local HashLink in place of react-router-hash-link - drop react-app-polyfill, the jest setup and xregexp - replace ESLint with Biome, and match the other sites' tsconfigs - serve the dumped JSON from static-contents/modules/ at runtime instead of compiling it into the bundle, and mount that directory with sirv in both the dev and preview servers - lazy-load NewArticleAlert: at 342 kB of static bibliography it is the largest file in the app and only ever renders on the top page, which cuts the entry chunk from 580 kB to 200 kB - restate the theme sizes the modules/ move and border-box need, and keep the browser's own font on form controls - set the GA4 measurement ID replacing the shut-down UA property - write down the deployment procedure
49 lines
2.2 KiB
TypeScript
49 lines
2.2 KiB
TypeScript
import { Helmet } from '@dr.pogodin/react-helmet';
|
|
import { Route, Routes } from 'react-router';
|
|
import PageNotFound from '../common/lib/PageNotFound';
|
|
import type { MultiLang } from '../config';
|
|
import Functions from '../functions';
|
|
import styles from './Database.module.css';
|
|
import DatabaseAdvancedSearch from './DatabaseAdvancedSearch';
|
|
import DatabaseDetailItem from './DatabaseDetailItem';
|
|
import DatabaseSearchByAdvancedKeyword from './DatabaseSearchByAdvancedKeyword';
|
|
import DatabaseSearchByIndexId from './DatabaseSearchByIndexId';
|
|
import DatabaseSearchByItemType from './DatabaseSearchByItemType';
|
|
import DatabaseSearchByKeyword from './DatabaseSearchByKeyword';
|
|
import DatabaseTop from './DatabaseTop';
|
|
|
|
interface Props {
|
|
lang: MultiLang;
|
|
}
|
|
|
|
const Database = (props: Props) => {
|
|
const { lang } = props;
|
|
return (
|
|
<div className={styles.database}>
|
|
<Helmet>
|
|
<title>
|
|
{Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} - {Functions.siteTitle(lang)}
|
|
</title>
|
|
</Helmet>
|
|
<Routes>
|
|
<Route index element={<DatabaseTop lang={lang} />} />
|
|
<Route path="item/:id" element={<DatabaseDetailItem lang={lang} />} />
|
|
<Route path="item/id/:doi" element={<DatabaseDetailItem lang={lang} />} />
|
|
<Route path="advanced" element={<DatabaseAdvancedSearch lang={lang} />} />
|
|
<Route path="list" element={<DatabaseSearchByIndexId lang={lang} />} />
|
|
<Route path="list/:id" element={<DatabaseSearchByIndexId lang={lang} />} />
|
|
<Route path="search" element={<DatabaseSearchByKeyword lang={lang} />} />
|
|
<Route path="search/advanced" element={<DatabaseSearchByAdvancedKeyword lang={lang} />} />
|
|
<Route path="search/itemtype/:itemType" element={<DatabaseSearchByItemType lang={lang} />} />
|
|
<Route
|
|
path="search/itemtype/:itemType/:subItemType"
|
|
element={<DatabaseSearchByItemType lang={lang} />}
|
|
/>
|
|
<Route path="*" element={<PageNotFound lang={lang} />} />
|
|
</Routes>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Database;
|