Read the Docs 클릭
VScode 터미널에서 명령어 입력하고 설치
설치가 정상적으로 됬는지 확인하기 위해 package.json
파일에서
확인하기
npm start 로 프로젝트 시작
import './App.css';
import { BrowserRouter } from 'react-router-dom'; // 브라우저 URL 과 React App 을 연결 하는 기능
function App() {
return (
<BrowserRouter> // 최상위 태그로 감싸기
<div className="App">
<h2>App.js</h2>
</div>
</BrowserRouter>
);
}
export default App;
<Routes>
라는 컴포넌트로 감싸줍니다.<Route />
컴포넌트를 사용하는데 URL 경로와 컴포넌트를 매핑 시켜주는 역할을 합니다.import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import New from './pages/New';
import Edit from './pages/Edit';
import Diary from './pages/Diary';
function App() {
return (
<BrowserRouter>
<div className="App">
<h2>App.js</h2>
<Routes>
// 경로가 index 일 때(path = '/') element = { 컴포넌트 }
<Route path="/" element={<Home />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
Router.Provider
컴포넌트 아래 Home
컴포넌트가 정상적으로 추가된 것을 볼 수 있습니다.<Route path="/" element={<Home />} />
가 index 를 가르키고 있으면, Home
컴포넌트를 렌더해라. 라고 명령을 내렸는데 현재 웹 브라우저 URL 이 /
아무것도 없는 것과 똑같기 때문에 Router.Provider
가 전달받은 Home
컴포넌트를 매핑시켜서 렌더 했습니다.import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import New from './pages/New';
import Edit from './pages/Edit';
import Diary from './pages/Diary';
function App() {
return (
<BrowserRouter>
<div className="App">
<h2>App.js</h2>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
<Routes>
안에 있어야 하는데 <Routes>
바깥에 있는 부분은 그대로 유지가 됩니다.<Routes>
컴포넌트 바깥으로 빼서 작성을 하면 어떤 페이지에서도 다 나타나는 요소들을 사용 할 수 있습니다.<a>
태그를 사용 합니다.react-router
를 사용하는 어플리케이션은 <a>
태그를 사용하지 않습니다.<Link to={'경로전달'}></Link>
// RouteTest.js
import { Link } from 'react-router-dom';
const RouteTest = () => {
return (
<>
<Link to={'/'}>Home</Link>
<br />
<Link to={'/diary'}>Diary</Link>
<br />
<Link to={'/new'}>New</Link>
<br />
<Link to={'/edit'}>Edit</Link>
<br />
</>
);
};
export default RouteTest;
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import RouteTest from './components/RouteTest';
import Home from './pages/Home';
import New from './pages/New';
import Edit from './pages/Edit';
import Diary from './pages/Diary';
function App() {
return (
<BrowserRouter>
<div className="App">
<h2>App.js</h2>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/edit" element={<Edit />} />
<Route path="/diary" element={<Diary />} />
</Routes>
<RouteTest />
</div>
</BrowserRouter>
);
}
export default App;
react-rotuer
를 이용해서 구현 할 수 있습니다.