React 프로젝트 설치/생성/실행, 구조, 라우터 설정

보기 쉽게 정리하려 포스팅합니다.

 

1. React 프로젝트 설치/생성/실행

1) 설치

npm install -g create-react-app

 

2) 생성

create-react-app client

 

3) 실행

cd client
npm start

 

2. React 구조

 

3. React 라우터 설정, BrowserRouter

1) 설치

npm install --save react-router-dom

 

2) 설정

// App.js(react-router-dom version 5.2.0)

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Redirect } from 'react-router';
import Header from './components/Layout/Header/Header';
import Footer from './components/Layout/Footer/Footer';
import Main from './pages/Main/Main';
import About from './pages/About/About';
import NotMatch from './pages/NotMatch/NotMatch';

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Switch>
        <Route exact path="/" component={Main} />
        <Route path="/about" component={About} />

        <Route path="/404" component={NotMatch} />
        <Redirect from="*" to="/not-found" />
      </Switch>
      <Footer />
    </BrowserRouter>
  );
}

export default App;

// App.js(react-router-dom version 6이상)

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

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

        <Route path="/404" element={<NotMatch />} />
      </Routes>
    </Router>
  );
}

export default App;

 

https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom?rq=1 

https://ibaslogic.com/routing-with-react-router/

https://ko.reactjs.org/docs/faq-structure.html

https://d2.naver.com/helloworld/1848131

https://xtring-dev.tistory.com/m/39