react (5) - router

VSCode로 리액트,  IntelliJ로 SpringBoot 프로젝트 설치 후 진행중.

 

 

-package.json에 proxy 추가 

"proxy": "http://localhost:9000"

 

 

 

 

-react-router-dom 설치 : 페이지 이동에 활용

 

 

 

 

-src>pages>About.js , Food.js, Home.js , HomeSub1.js , HomeSub2.js , HomeSub3.js , index.js  , Main.js   만들기 

-RouteMain.js  에 다음의 코드

 

RouteMain.js

<Route path='/about' element={<About/>}>

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

</Route>

src>pages>About.js

RouteMain.js

<Route path='/food' element={<Food/>}>

<Route path=':food1' element={<Food/>}/>

<Route path=':food1/:food2' element={<Food/>}/>

</Route>

src>pages>Food.js

 

 

 

RouteMain.js

<Route path='/home/*' element={<Home/>}/>

 

src>pages>index.js

export {default as Home} from './Home';

export {default as About} from './About';

export {default as Food} from './Food';

export {default as Main} from './Main';

 

 

 

 

 

 

 

 

 

-FoodRoot.js

 

 

 

-FoodRouteMain.js

 

 

 

-FoodForm.js

 

 

Spring Boot

FoodController