React router dom v6

yarn add react-router-dom 설치

 

index.js

import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter} from "react-router-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 이부분이 index.html에 있는 div#root에 우리가 만든 컴포넌트를 실제로 랜더링하도록 연결해주는 부분입니다.
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

app.js

 

import { Route, Routes, NavLink } from "react-router-dom";
import React from 'react';
import './style.css'

import Home from "./Home"
import Cat from "./Cat"
import Dog from "./Dog"


function App() {
  return (
    <>
    <div className="App">
      <nav>
        <NavLink to="/" >Home</NavLink>
        <NavLink to="cat">Cat</NavLink>
        <NavLink to="dog">Dog</NavLink>
        
        --NavLink는 클릭하면 자동으로 active class를 생성!style.ss
        .active {
        background-color: gray;
   
}   
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="Cat/:username" element={<Cat />} />
        <Route path="Dog" element={<Dog/>} />
      </Routes>
   
    </div>
    </>
  );
}

export default App;

home.js, useNavigate로 버튼 누르면 페이지 이동

import React from "react";
import { useNavigate } from "react-router-dom";

const Home = (props) => {
        let navigate = useNavigate();
    return (
        <div>
            메인 화면이에요. <button onClick={() => {
                navigate("/dog")
            }}> 강아지 페이지이동</button>
        </div>
    )
}

export default Home;

cat.js, useParam() 사용

import React from "react";
import { useParams } from "react-router-dom";

const Cat = (props) => {
    let { username } = useParams();
  
    return (
        <div>{ username }의 고양이 화면이에요.</div>
    )
}

export default Cat;

dog.js

 

import React from "react";


const Dog = (props) => {
    return (
        <div>강아지 화면이에요.</div>
    )
}

export default Dog;