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를 표시합니다.