【React（Typescript）】ヘッダーナビゲーションの実装例

作るもの

実装例

• React（Typescript）の雛形を作成する。

terminal

npx create-react-app header --template typescript

• src配下にcomponentsディレクトリを作成し、その中に、Header.tsx、Header.css、Navigation.tsxを作成する。

Header.tsx

import React from 'react';
import { Link } from 'react-router-dom';
import './Header.css'; // Headerコンポーネントに対応するCSSファイルをインポート

const Header: React.FC = () => {
  return (
    <header className="header">
      <Link to="/" className="logo">
        My Restaurant
      </Link>
      <nav>
        <ul className="nav-links">
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/menu">Menu</Link>
          </li>
          <li>
            <Link to="/locations">Locations</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

Header.css

/* src/components/Header.css */
.header {
  background-color: #222;
  color: #fff;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.logo {
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

.nav-links {
  display: flex;
}

.nav-links li {
  margin-left: 1.5rem;
  list-style: none;
}

.nav-links li a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}

.nav-links li a:hover {
  color: #ffca28;
}

Navigation.tsx

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation: React.FC = () => {
  return (
    <nav className="header-navigation">
      <Link to="/signin">Sign In</Link>
      <Link to="/signup">Sign Up</Link>
    </nav>
  );
};

export default Navigation;

• srcディレクトリ配下の、App.tsxを以下のように書き換える。

App.tsx

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Navigation from './components/Navigation';

const Home: React.FC = () => {
  return <h2>Home Page</h2>;
};

const Menu: React.FC = () => {
  return <h2>Menu Page</h2>;
};

const Locations: React.FC = () => {
  return <h2>Locations Page</h2>;
};

const Contact: React.FC = () => {
  return <h2>Contact Page</h2>;
};

const App: React.FC = () => {
  return (
    <Router>
      <Header />
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/menu" element={<Menu />} />
        <Route path="/locations" element={<Locations />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
};

export default App;

• サーバーを起動する。

terminal

npm start

• 以下の画面が表示されれば成功！