Routers en Paginas

interface ListPageProps {
  games: Game[],
  handleAdd: (game: Game) => void
}

import InputView from 'components/InputView/InputView';
import List from 'components/List/List';
import React from 'react';
import { Game } from 'types';
import styles from './ListPage.module.css';

interface ListPageProps {
  games: Game[],
  handleAdd: (game: Game) => void
}

const ListPage = ({games,handleAdd} : ListPageProps) => {
  return (
    <div>
      <List games={games} />
      <InputView onAdd={handleAdd} />
    </div>
  );
}

export default ListPage;

import ListPage from 'pages/ListPage/ListPage';
import Header from 'components/Header/Header';
import React, { useState } from 'react';
import { Game } from 'types';
import styles from './App.module.css';

const App = () => {
  const [games, setGames] = useState<Game[]>([
    ...
  ]);

  const handleAdd = (game: Game) => {
    let max = Math.max(...games.map((g) => g.id!),0) + 1;
    game.id = max;
    setGames([...games, game])
  }

  return (
    <div>
      <Header />
      <div className={styles.container}>
        <ListPage games={games} handleAdd={handleAdd}/>
      </div>
    </div>
  );
}

export default App;

npm install --save react-router-dom@5
npm install --save-dev @types/react-router-dom@5

import styles from './HomePage.module.css';

const HomePage = () => {

  return <p className={styles.welcomeText}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit mi nec elit congue, et fringilla tellus pharetra. Cras commodo, est quis hendrerit porta, ligula arcu egestas arcu, vitae volutpat ex libero tristique augue. Sed pellentesque urna nec eros pellentesque, quis interdum tellus convallis. Cras maximus fringilla magna, a viverra nulla malesuada eget. Integer erat eros, eleifend a pulvinar sed, aliquam sit amet quam. Pellentesque bibendum tortor eget faucibus varius. Nunc dictum est enim, ac suscipit quam ultricies mattis. Sed ut quam in elit rhoncus accumsan eget sed nibh. Donec tincidunt, nulla quis viverra mattis, quam arcu posuere sapien, sit amet luctus magna nisl quis nisl. Nulla scelerisque dapibus interdum. Nulla ultrices non erat vitae consequat. Donec sit amet est quis tellus auctor rutrum ut vel felis. Cras egestas euismod vestibulum. Ut aliquam porttitor nisi, in gravida justo interdum quis. Vivamus quis lectus ac metus sollicitudin vulputate in nec diam. Proin vel cursus nunc.
    </p>
}

export default HomePage;

import ListPage from 'pages/ListPage/ListPage';
import React, { useState } from 'react';
import { Game } from 'types';
import styles from './App.module.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import HomePage from 'pages/HomePage/HomePage';
import Header from 'components/Header/Header';

const App = () => {
  ...
  return (
    <Router>
      <div>
        <Header />
        <div className={styles.container}>
          <Switch>
            <Route path="/list">
              <ListPage games={games} handleAdd={handleAdd} />
            </Route>
            <Route path="/" exact>
              <HomePage />
            </Route>
          </Switch>

        </div>
      </div>
    </Router>
  );
}

export default App;

<Link to="/">Home</Link>
// <a href="/">Home</a>

import React from "react";
import { NavLink } from "react-router-dom";
import styles from "./Header.module.css"

const Header = () => {
  return (
    <div className={styles.header}>
        <div className={styles.headerName}>H2O Store</div>
        <ul>
          <li><NavLink exact to="/" activeClassName={styles.activeLink}>Home</NavLink></li>
          <li><NavLink exact to="/list" activeClassName={styles.activeLink}>Games</NavLink></li>
        </ul>
    </div>
  );
}

export default Header;

.header { 
  background-color: #333;
  font-size: 12pt;
  flex-direction: row;
  display: flex;
}

.headerName {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.activeLink {
  font-weight: bolder;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

import styles from './DetailPage.module.css';

interface DetailPageProps {
  games: Game[]
}

const DetailPage = ({games} : DetailPageProps) => {
  return (
    <div>Detail Page</div>
  )
}

export default DetailPage;

<Switch>
  <Route path="/list">
    <ListPage games={games} handleAdd={handleAdd} />
  </Route>
  <Route path="/" exact>
    <HomePage />
  </Route>
  <Route path="/detail/:id">
    <DetailPage games={games}/>
  </Route>
</Switch>

import { useParams } from 'react-router-dom';
import { Game } from 'types';
import styles from './DetailPage.module.css';

interface ParamTypes {
  id: string
}

interface DetailPageProps {
  games: Game[]
}

const DetailPage = ({games} : DetailPageProps) => {
  let { id } = useParams<ParamTypes>();

  let game = games.find((game: Game) => game.id === parseInt(id));

  return (
    <div>
      <div>{game?.name}</div>
      <div>{game?.releaseYear}</div>
      <div>{game?.sales}</div>
    </div>
  )
}

export default DetailPage;

const ListItem = ({ game }: ListItemProps) => {
  return (
    <Link to={`/detail/${game.id}`}>
      <div key={game.id} className={styles.gameCard}>
        <div>{game.name}</div>
        <div>{game.releaseYear}</div>
        <div>{game.sales}</div>
      </div>
    </Link>
  )
}