Router dom 설치

src → components → Main.js

→ pages → About.js / Home.js

→ Root.js / RouterMain.js

index.js

root.render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>
);

Root.js

function Root(props) {
  return (
    <BrowserRouter>
      <RouterMain />
    </BrowserRouter>
  );
}

RouterMain.js

각각의 <Route path=”” element={ } / >는 <Routes></Routes>태그 안에 들어감

function RouterMain(props) {
  return (
    <div>
      {/* 모든 페이지에서 공통으로 포함되는 component나 image */}
      <Menu />
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

Menu.js

function Menu(props) {
  return (
    <div>
      <ul className="menu">
        <li>
          <NavLink to="/">HOME</NavLink>
        </li>
        <li>
          <NavLink to="/about">About</NavLink>
        </li>
      </ul>
    </div>
  );
}

파라미터 넘길 때

about에 name이라는 파라미터 값 넘기기

<Route path="/about/:name" element={<About />} />

• About.js

  function About(props) {
    const { name } = useParams(); //RouterMain : name
  
    return (
      <div>
        <h3>안녀하세요? 제이름은 {name == null ? "쌍용교육" : name}입니다.</h3>
      </div>
    );
  }