페이지 이동하기 (BrowserRouter, Link, Routes, Route, useNavigate)

 

 

1. Link, Routes , Route 사용 _ !! 상위 페이지에 <BrowserRouter>로 감싸줘야함 !!

 

📃 main.jsx

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom'

createRoot(document.getElementById('root')).render(
  <BrowserRouter> // ❗❗ 필수
    <App />
  </BrowserRouter>
)

 

📃 App.jsx      => ❗❗ 경로는 절대경로로 사용

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

function App() {

  const [selectedRowIndex, setSelectedRowIndex] = useState(null);
  const [modal, setModal] = useState(false);

  return (
    <>
      <Link to='/pages/tictactoe/reference/TodoList'>TODO LIST</Link> // ❗❗ 경로는 절대경로로

      <Routes>
        <Route path='/pages/tictactoe/reference/TodoList' element={<TodoList />} />
      </Routes>
    </>
  )
}

 

 

하단에 다른 컴포넌트가 있으면 항상 보여짐

->

<Header />와 <Sidebar />는 return문에서 <Routes /> 바깥에 위치해 있으므로, 항상 렌더링됩니다. 즉, 현재 URL이 무엇이든 간에 무조건 화면에 표시 됨

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

function App() {

  const [selectedRowIndex, setSelectedRowIndex] = useState(null);
  const [modal, setModal] = useState(false);

  return (
    <>
      <Header />  {/* 항상 보여짐 */}
      <Sidebar /> {/* 항상 보여짐 */}
      
      <Link to='/pages/tictactoe/reference/TodoList'>TODO LIST</Link>

      <Routes>
        <Route path='/pages/tictactoe/reference/TodoList' element={<TodoList />} />
      </Routes>
    </>
  )
}

 

 

❓ 하단 코드 문제점

=> test 페이지와 todolist 페이지를 왔다갔다하면 서로의 컴포넌트가 남아있음

function App() {

  return (
    <>
      <nav>
        <Link to='/pages/Test'>Test 모음</Link>
        <Link to='/pages/tictactoe/reference/TodoList'>Todo List</Link>
      </nav>

      <Routes>
        <Route path='/pages/Test' element={<Test />}/>
        <Route path='/pages/tictactoe/reference/TodoList' element={<TodoList />}/>
      </Routes>
    </>
  )
}

 

 

해결방법

📃 App.jsx 

function App() {

  return (
    <>
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route path='pages/Test' element={<Test />}/>
          <Route path='pages/tictactoe/reference/TodoList' element={<TodoList />}/>
        </Route>
      </Routes>
    </>
  )
}

export default App

 

📃 Layout.jsx 

const Layout = () => {
    return(
        <>
            <nav className='menu_list'>
                <Link to='pages/Test'>Test 모음</Link>
                <Link to='pages/tictactoe/reference/TodoList'>Todo List</Link>
            </nav>

            <Outlet />
        </>
    )
}

 

 

2. useNavigate 사용

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about'); // '/about' 페이지로 이동
  };

  return <button onClick={handleClick}>Go to About</button>;
}