fmap react-router 기본 구성 (jsx 스타일)

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

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

export default Project;

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;

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

export default HostAnalysis;

import React from "react";
import {Link, Route, BrowserRouter, Routes, Outlet} from "react-router-dom";

export default function Root() {
  return (
    <div>
      <Link to="/projects">
        <button>Projects</button>
      </Link>
      <Link to="/host">
        <button>Host</button>
      </Link>
      <Link to="/hostAnalysis">
        <button>HostAnalysis</button>
      </Link>
      <Outlet/>
    </div>
  );
};

import { useRouteError, Link, Routes, Route, BrowserRouter } from "react-router-dom";
import Root from "./Root";

function NotFound() {
  const error = useRouteError();
  console.error(error);

  return (
    <BrowserRouter>
  <div id="not-found-root">
      <h1>Oops!</h1>
      <p>Sorry, an unexpected error has occured.</p>
      <p><i>{error.statusText || error.message}</i></p>
    </div>
    <Routes>
      <Link to="/">go home.</Link>
      <Route path="/" component={<Root/>}>root</Route>
    </Routes>
    </BrowserRouter>
  );
}

export default NotFound;

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {
  createBrowserRouter
  , RouterProvider
  , Route
  , createRoutesFromElements
  , BrowserRouter
} from "react-router-dom"
import Root from "./pages/Root";
import NotFound from './pages/NotFound';
import App from './App';
import Project from "./pages/Project";
import Host from "./pages/Host";
import HostAnalysis from "./pages/HostAnalysis";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root/>} errorElement={<NotFound/>}>
      <Route errorElement={<NotFound/>}>
        <Route path="/projects" element={<Project/>}></Route>
        <Route path="/host" element={<Host/>}></Route>
        <Route path="/hostAnalysis" element={<HostAnalysis/>}></Route>
      </Route>
    </Route>
  )
);

const documentBodyRoot = ReactDOM.createRoot(document.getElementById('root'));
documentBodyRoot.render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);