[React 토이프로젝트] react-router 설치

1. 리액트 라우터 설치

   npm install react-router-dom

   • "react-router-dom": "^6.9.0",

2. 프로젝트에 라우터 적용

   <BrowserRouter>컴포넌트 사용하여 구현

   src/index.js

   // src/index.js
   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { BrowserRouter } from 'react-router-dom';
   import { legacy_createStore as createStore } from 'redux';
   import { Provider } from 'react-redux';
   import App from './App';
   import rootReducer from './redux/reducer';
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   const devTools = window.__REDUX_DEVTOOLS_EXTENSION__;
   const store = createStore(rootReducer, devTools && devTools());
   
   root.render(
     <React.StrictMode>
       <BrowserRouter>
         <Provider store={store}>
           <App />
         </Provider>
       </BrowserRouter>
     </React.StrictMode>
   );
   

3. 페이지 만들기

   메인페이지, 회원가입 페이지

   • src/pages/Main.js

   import React from 'react';
   import { Link } from 'react-router-dom';
   
   function Main() {
     return (
       <>
         <h2>메인페이지</h2>
         <Link to="/signUp">회원가입</Link>
       </>
     );
   }
   
   export default Main;

   …태그 사용하면 안됨! <Link>컴포넌트를 사용하여 다른 주소로 이동 시킴

   WHY ❓

   a태그의 기본적인 속성은 페이지를 이동시키면서, 페이지를 아예 새로 불러오게 됨. 그러면 리액트 앱이 지니고 있는 상태들도 초기화되고, 렌더링된 컴포넌트들도 모두 사라지고 새로 렌더링하게 됨.

   컴포넌트는 [HTML5 History API](https://developer.mozilla.org/ko/docs/Web/API/History)를 사용하여 브라우저의 주소만 바꾸고 페이지를 새로 불러오지는 않음

• src/pages/Main.js

import React from 'react';

function SignUp() {
  return (
    <div>
      <h2>회원가입 페이지!!!!!!</h2>
    </div>
  );
}

export default SignUp;

1. 특정 주소에 컴포넌트 연결하기

   <Route>라는 컴포넌트 사용

   <Route path="주소규칙" component={보여주고싶은 컴포넌트}>

   • src/App.js

   import React from 'react';
   import { Routes, Route } from 'react-router-dom';
   import { useDispatch, useSelector } from 'react-redux';
   import { setDecrease, setIncrease } from './redux/actions/CountAction';
   import Header from './pages/Header';
   import Main from './pages/Main';
   import SignUp from './pages/SignUp';
   
   function App() {
     const dispatch = useDispatch();
     const number = useSelector((state) => state.Count.counter);
     return (
       <div className="App">
         <Header />
         <Routes>
           <Route path="/" element={<Main />} />
           <Route path="/signUp" element={<SignUp />} />
         </Routes>
       </div>
     );
   }
   
   export default App;

⚠️  Trouble shooting

에러 해결방법 참조

You cannot render a inside another . You should never have more than one in your app

참조

[React] 6. React Router (리액트 라우터) 사용하기

1. 프로젝트 준비 및 기본적인 사용법 · GitBook