shop → index.js
export { default as Shop } from "./Shop";
export { default as ShopForm } from "./ShopForm";
export { default as ShopDetail } from "./ShopDetail";
기존 RouterMain.js
<div className="main">
<Routes>
<Route path="/" element={<Main />} />
<Route path="/shop/list" element={<Shop />} />
<Route path="*" element={<h1>주소를 확인해주세요.</h1>} />
</Routes>
</div>
변경 RouterMain.js
<div className="main">
<Routes>
<Route path="/" element={<Main />} />
<Route path="/shop/list" element={<Shop />} />
<Route path="/shop/form" element={<ShopForm />} />
<Route path="/shop/detail/:num" element={<ShopDetail />} />
<Route path="*" element={<h1>주소를 확인해주세요.</h1>} />
</Routes>
</div>
import React from "react";
import { useNavigate } from "react-router-dom";
function Shop(props) {
const navi = useNavigate();
return (
<div>
<button
type="button"
className="btn btn-info"
onClick={() => {
navi("/shop/form");
}}
>
상품등록
</button>
<h1>상품목록 출력</h1>
</div>
);
}
export default Shop;