router 패키지 추가

yarn add react-router-dom
yarn add --dev cross-env

src/Project.js

function Project() {
    return (
        <div>
            <div>project setting & loading</div>
        </div>
    );
}

export default Project;

src/Host.js

function Host() {
  return (
    <div>
      <form>
        <label for="address">address</label>
        <input name="address"></input>
        <label for="port">port</label>
        <input name="port"></input>
      </form>
    </div>
  );
}

export default Host;

src/HostAnalysis.js

function HostAnalysis() {
    return (
        <div>host: </div>
    );
}

export default HostAnalysis;

src/App.js

import React from "react";
import {Link, Route, BrowserRouter, Routes} from "react-router-dom";
import Host from "./pages/Host";
import HostAnalysis from "./pages/HostAnalysis";
import Project from "./pages/Project";

function App() {
  return (
    <BrowserRouter>
        <Link to="/">
          <button>Projects</button>
        </Link>
        <Link to="/host">
          <button>Host</button>
        </Link>
        <Link to="/hostAnalysis">
          <button>HostAnalysis</button>
        </Link>
      <Routes>
        <Route path="/" component={Project}></Route>
        <Route path="/host" component={Host}></Route>
        <Route path="/hostAnalysis" component={HostAnalysis}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;