[ react] spa, React Router BrowserRouter
2024.01.27
작성일/수정일
2024-01-27 10:15:45 / 2024-01-27 10:15:45
Single Page Application(SPA)
서버로 부터 새로운 페이지를 불러오지 않고 현재의 페이지에 component를 동적으로 다시 작성하여 클라이언트와 소통하는 웹어플리케이션 필요한 모든 소스는 하나의 페이지에서 새로고침 없이 동작하게 된다.
## SEO 취약 -> React Router 해결
React Router를 사용하면 앱에서 발생하는 라우팅 Location, History 와 같은 브라우져 내장 API와 완벽하게 연동
- HTML의 태그와 유사한 기능을 한다.
- 현재 주소창에 경로와 매치될 경우 보여줄 컴포넌트
- path : 매치될 경로 지정
- component : 매치 되었을때 보여줄 컴포넌트 할당
> npm install react-router-dom --save
> npm install react-router-dom
BrowserRouter
리액트 라우터의 최상위 컨퍼넌트(component)를 감싸는 래퍼 컴퍼넌트
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(<BrowserRouter><App/></BrowserRouter>);
// 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();
import Home from './component/Home.js';
import Topics from './component/Topics.js';
import Contact from './component/Contact.js';
import { Route, Routes, Link } from 'react-router-dom';
//import { Route, Routes, NavLink } from 'react-router-dom';
const App = () => {
return(
<div>
<h1>Hello React</h1>
{/* Link to= 새로고침 없이 페이지를 로드 Ajax */}
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/topics">Topics</Link></li>
<li><Link to="/contact">contact</Link></li>
</ul>
<hr/>
<Routes>
<Route path="/" element={ <Home />}exact={true}/>
<Route path="/topics" element={ <Topics/>} />
<Route path="/contact" element={ <Contact/>} />
<Route path="/*" element={ 'Not Found' } />
</Routes>
</div>
);
}
export default App;
사용자가 path 지정없이 접속하면 HOME으로 없는 페이지는 Not Found를 표시합니다.