React (router)

Router 설치

1. PowerShell로 Router 설치

2. vsCode 새폴더로 kh-router-ex 열기

3. vsCode 터미널에서 yarn add react-router-dom 입력

 

 

 

 

프로젝트로 라우터 적용

 

-src 폴더 밑에 pages 폴더 생성

-js 파일 생성 (Home.js, About.js, Setting.js)

 

App.js에서 라우터 이동경로 생성

import './App.css';
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Setting from './pages/Setting';


function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/About" element={<About />} />
        <Route path="/Setting" element={<Setting />} /> 
      </Routes>
    </Router> 
  );
};

export default App;

 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 

페이지 컴포넌트 만들기

src/pages/Home.js

const Home = () => {
    return (
        <div>
            <h1>여기가 홈 입니다.</h1>
            <p>가장 먼저 보여지는 페이지 입니다.</p>
        </div>
    )
}
export default Home;

 

src/pages/About.js

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

const About = () => {
    return (
        <div>
            <h1>소개</h1>
            <p>리액트 라우터를 사용해 보는 프로젝트 입니다.</p>
        </div>
    )
}
export default About;

 

src/pages/Setting.js

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

const Setting = () => {
    return (
        <div>
            <h1>소개</h1>
            <p>리액트 라우터를 사용해 보는 프로젝트 입니다.</p>
        </div>
    )
}
export default Setting;