[React] React-router

🌞 환경 설정

npx create-react-app react-router-dom 을 통해 react 실습환경 만들기

[결과]

---

🚗 React-router 설치하기

npm install react-router-dom 을 통해 react-router 설치하기

---

🚝 index.js 코드 수정하기

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter , Route, Routes } from 'react-router-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import * as serviceWorker from './serviceWorker';


function Home() {
  return(
    <div>
      <h2>Home</h2>
      Home...
    </div>
  )
}

function Topics() {
  return(
    <div>
      <h2>Topics</h2>
      Topics...
    </div>
  )
}


function Contact(){
  return(
    <div>
      <h2>Contact</h2>
      Contact...
    </div>
  )
}

function App() {
  return(
    <div>
      <h1>React Router DOM example</h1>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/topics">Topics</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>

      <Route exact path="/"><Home></Home></Route>
      <Route path="/topics"><Topics></Topics></Route>
      <Route path="/contact"><Contact></Contact></Route>
      <Route path="/">Not found</Route>
      
    </div>
  )
}

ReactDOM.render(
  // BrowserRouter를 사용할 수 있는 상태가 되었다.
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);


reportWebVitals();
serviceWorker.unregister();

[결과]

터미널에 npm start 입력

오류!!😥

Route 태그는 Routes의 element로 사용되어야한다.

오류 해결을 위한 코드 변경1

    <Routes>
      <Route exact path="/"><Home></Home></Route>
      <Route path="/topics"><Topics></Topics></Route>
      <Route path="/contact"><Contact></Contact></Route>
      <Route path="/">Not found</Route>
    </Routes>

Route 컴포넌트를 Routes로 감싸준다.

[문제 해결 결과]

또다른 오류 발생😅

Home 컴포넌트가 Route 컴포넌트가 아니라고한다!!

문제해결을 위해 참고한 자료
https://velog.io/@developerjhp/Error-App-is-not-a-Route-component.-All-component-children-of-Routes-must-be-a-Route-or-React.Fragment

여기를 보고 Route의 element로 원하는 컴포넌트를 집어넣어야하는구나 싶었다!

오류 해결을 위한 코드 변경2

      <Routes>
        <Route exact path="/" element={<Home/>}/>
        <Route path="/topics" element={<Topics/>}/>
        <Route path="/contact" element={<Contact/>}/>
      </Routes>

결과

Topics 클릭시

---

🎁 Topics.. 클릭시 페이지 Reload없이 처리를 위한 Link 사용

👀 수정 전 코드

👀✅수정 후 코드

	import { BrowserRouter , Route, Routes , Link } from 'react-router-dom';

        <li><Link to="/">Home</Link></li>
        <li><Link to="/topics">Topics</Link></li>
        <li><Link to="/contact">Contact</Link></li>

---

🎨 Link를 NavLink로 변경한다면?

결과는 동일하지만, console창을 확인해보면

Home에 class="active" 가 생성됐다!!

이후, Topics를 클릭하면 ?

Topics로 class="active" 가 옮겨 간 것을 확인할 수 있다

즉, 사용자가 자신이 어떤 페이지에 위치해 있는지 직관적으로 알 수 있다