ABOUT ME

Today
Yesterday
Total
  • [react] 라우팅하기
    react+vue 2022. 10. 4. 18:42

    react router dom 설치

    npm i react-router-dom
    

    라우팅 하기

    • index.js
    root.render(
        <BrowserRouter>
            <App />
      </BrowserRouter>
    );
    

    <App/>을 <BrowserRouter>로 감싸준다

    여기서 'BrowserRouter' is not defined라는 에러를 만났는데

    이는 import를 시켜주지 않아서 생긴 에러다.

    import BrowserRouter from 'react-router-dom';
    

    이렇게 import시켜주면 된다.

    주소 “/”에 HomePage컴포넌트를 지정해주자

    • App.js
    import './App.css';
    import Footer from './components/footer';
    import Header from './components/header';
    import HomePage from './pages/homePage';
    import { Route,Routes } from 'react-router-dom';
    
    function App() {
     
      return (
        <div>
          <Header />
          <Routes>
            <Route path="/home" exact={true} component={HomePage}/>
          </Routes>
          <Footer />
        </div>
      );
    }
    
    export default App;
    

    처음에 <Route>태그만 써서 “A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.”라는 에러를 만났다.

    알고보니 ‘react-router-dom’이 버전 업데이트를 하면서 <Route>태그에는 <Routes>태그를 감싸주어야 제대로 작동한다고 한다.

    <Routes>태그로 감싸주고 잘 작동되나 했더니 헤더와 푸터만 나오고 HomePage컴포넌트는 안보이는 현상이 나타났다.

    “does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.”이런 에러인데… 검색해 보니

    import './App.css';
    import Footer from './components/footer';
    import Header from './components/header';
    import HomePage from './pages/homePage';
    import { Route,Routes } from 'react-router-dom';
    
    function App() {
     
      return (
        <div>
          <Header />
          <Routes>
            <Route path="/home" exact={true} element={<HomePage/>}/>
          </Routes>
          <Footer />
        </div>
      );
    }
    
    export default App;
    

    component를 element로 바꿔주고, 중괄호 안에 jsx문법을 써주면 된단다…

    버전이 바뀌면서 많은게 바뀐 모양…

    헤더와 푸터 HomePage까지 잘나왔다.

    이처럼 react는 원페이지로 동작하므로 a태그를 쓸 수 없는데

    그 대안으로 라우팅을 사용하면 된다.

    'react+vue' 카테고리의 다른 글

    댓글

Designed by Tistory.