Router v6 헷갈려서 공부해봤다. 기초정리

Router

 

package.json 파일에 들어가 현재 라우터의 버전을 확인해보자. 

 

Router 설치하기

npm install react-router-dom@6

 

index.js파일에 BrowserRouter import하기

import { BrowserRouter as Router } from 'react-router-dom';
//그냥 BrowserRouter로 써도 되지만 더 짧게 쓰려고 Router로 import

 

기본적으로 Route를 할때는 아래의 구조를 같는다.

const container = document.getElementById('root');
const root = createRoot(container);
root.render(
  <Router>
	<Routes>
		<Route><Route>
		<Route><Route>
		<Route><Route>
	</Routes>
  </Router>
);

만약 Router 안에 Routes와 Route를 다 쓸거면 (컴포넌트 처리 안하고) 당연히 걔네도 import를 해줘야한다.

import { BrowserRouter as Router } from 'react-router-dom'

 

 

App.jsx

//path속성으로 기본URL뒤에 붙을 주소, element속성에 그 주소로 이동했을때 보여줄 요소
<Route path ='/' element={Home />}

import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Detail from './pages/detail';
import Error from './pages/ErrorPage';

const App = () => {
  const style = { margin: '10px' };

  return (
    <div>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/detail' element={<Detail />} />
        //팁! path에 *을 넣어주면 위 정해준 Route가 아닌 다른 모든 주소를 참조한다.
        <Route path='*' element={<Error />} />
      </Routes>
    </div>
  );
};

export default App;

 

 

Link연결하기

• Routes밖에서 Link to를 이용해 눌렀을 때 이동할 페이지를 연결해준다. (a태그와 비슷)

//링크 넣어주기
import { Route, Routes, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Detail from './pages/detail';
import Error from './pages/ErrorPage';

const App = () => {
  const style = { margin: '10px' };

  return (
    <div>
      <h1>React Router</h1>
      <nav>
        <Link to='/' style={style}>home</Link>
        <Link to='/about' style={style}>about</Link>
        <Link to='/detail'>detail</Link>
      </nav>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/detail' element={<Detail />} />
        <Route path='*' element={<Error />} />
      </Routes>
      <div>footer</div>
    </div>
  );
};

export default App;

 

 

무언가를 클릭했을 때 원하는 페이지로 넘어가게하고싶다면 useNavigate

import React from 'react';
//사용할 모듈 import하는거 잊지말기
import { useNavigate } from 'react-router-dom';

const Login = () => {
	// 변수선언
  let navigate = useNavigate();
  return (
    <div>
      <input type='text' placeholder='ID' />
			// click시 navigate걸어주기
      <button onClick={() => {navigate('/about');}}>
        소개로 넘어가기
      </button>
    </div>
  );
};

export default Login;

왜 그냥 링크를 안쓰냐고?

보통 form을 제출한다거나, 로그인버튼을 누른다면 다른페이지를 보여주고싶다. 그냥 link보단 event나 function을 보여주는것이 더 알맞다.

 

 

파라미터 넣기 useParams

기본경로 뒤에 :(파라미터이름) 을 넣어주면 된다.

<Route path='/:username' element={<Home />} />

import Login from './LoginPage';
import { useParams } from 'react-router-dom';

const Home = () => {
  let { username } = useParams();
  return (
    <div>
      <h1>{username}을 위한 홈</h1>
      <p>가장 먼저 보여지는 페이지입니다.</p>
      <Login />
    </div>
  );
};

export default Home;

id를 파라미터 이름으로 넣어주고 API를 리퀘스트할때 그걸 사용하는것도 좋은 방법이다.

 

 

 

완성작

<Route path='*' element={<Error />} />로 예외처리를 해놓아서 그런지 

<Route path='/:username' element={<Home />} /> 이 코드에서 :usename값이 안들어가면 * 로 인식한다.

어떻게 고칠지 알아봐야겠다.