[리액트 라우터2 : navigte, nested routes, outlet] 강의 질문

[조혜진]

선생님 안녕하세요.
[리액트 라우터2 : navigte, nested routes, outlet] 강의 관련 질문입니다.

npm start하면 첫 메인페이지는 잘 나오는데
서브메뉴를 클릭하는 순간 console 창에 uncaught 오류가 뜨고 계속 로딩되면서 페이지가 넘어가질 않습니다ㅠㅠ
구글링 해봐도 못 찾다가 게시판에 올립니다.

import './App.css';
import { Container, Nav, Navbar } from 'react-bootstrap';
import { useState } from 'react';
import data from './data.js';
import Detail from './routes/Detail.js';
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';

function App() {
  let [shoes] = useState(data);
  let navigate = useNavigate();
  <Detail />

  return (
    <div className="App">

      <Navbar bg="light" variant="light">
        <Container>
          <Navbar.Brand href="/" onClick={navigate('/')}> 🌝 해피 moonday </Navbar.Brand>
          <Nav className="me-auto">
            <Link className='link' to="/product">상품</Link>
            <Link className='link' onClick={navigate('/event')} to="/event">이벤트</Link>
            <Link className='link' onClick={navigate('/detail')} to="/detail">상세페이지</Link>
          </Nav>
        </Container>
      </Navbar>

      <Routes>
        <Route path="/" element={
          <>
            <div className='main-bg'></div>
            <div className='container'>
              <div className='row'>
                {shoes.map((a, i) => {
                  return (
                    <Prod shoes={shoes[i]} i={i + 1} />
                  )
                })
                }
              </div>
            </div>
          </>} />

        <Route path="/detail" element={<Detail />} />

        {/* nestes routes */}
        <Route path="/about" element={<About />}>
          <Route path="info" element={<div>인포</div>} />
          <Route path="member" element={<div>멤버</div>} />
        </Route>

        <Route path="/event" element={<Event />}>
          <Route path="one" element={<h4>첫 주문 시 양배추즙 서비스</h4>}></Route>
          <Route path="two" element={<h4>생일기념 쿠폰받기</h4>}></Route>
        </Route>

        <Route path="*" element={<div>없는 페이지입니다.</div>} />
      </Routes>

    </div>
  );
}

function Event(){
  return(
    <div>
      <h2>오늘의 이벤트</h2>
      <Outlet></Outlet>
    </div>
  )
}

function About() {
  return (
    <div>
      <h4>회사 정보</h4>
      <Outlet></Outlet>
    </div>
  )
}

function Prod(props) {
  return (
    <div className='col-md-4'>
      
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
      <p>{props.shoes.price}</p>
    </div>
  )
}

export default App;

-----
console창

react_devtools_backend.js:4026 Warning: Cannot update a component (`BrowserRouter`) while rendering a different component (`App`). To locate the bad setState() call inside `App`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at App (http://localhost:3000/static/js/bundle.js:44:64)
    at Router (http://localhost:3000/static/js/bundle.js:49658:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:47879:5)
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnAboutRenderPhaseUpdatesInDEV @ react-dom.development.js:27492
scheduleUpdateOnFiber @ react-dom.development.js:25498
dispatchSetState @ react-dom.development.js:17527
push @ history.ts:569
(anonymous) @ hooks.tsx:240
App @ App.js:18
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
react-dom.development.js:27292 Uncaught 
checkForNestedUpdates @ react-dom.development.js:27292
scheduleUpdateOnFiber @ react-dom.development.js:25475
dispatchSetState @ react-dom.development.js:17527
push @ history.ts:569
(anonymous) @ hooks.tsx:240
App @ App.js:18
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
history.ts:561 Throttling navigation to prevent the browser from hanging. See https://crbug.com/1038223. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection
push @ history.ts:561
(anonymous) @ hooks.tsx:240
App @ App.js:22
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
115react-dom.development.js:27292 Uncaught 

[codingapple]

function App() {
  let [shoes] = useState(data);
  let navigate = useNavigate();
  <Detail />

Detail컴포넌트가 저기있는게 이상해보입니다

[조혜진]

감사합니다 선생님.
말씀하신 대로 return <App>컴포넌트 안에 디테일을 넣고 다시 npm start 를 해보았는데도 오류가 뜨고
uncaught 가 계속 돌면서 페이지가 로딩만 되네요ㅠㅠ

오류창에 계속 떠 있던 문구는
VM40:236 You should call navigate() in a React.useEffect(), not when your component is first rendered 이었고
특히 <Detail /> 로 링크 연결해둔 '상세페이지'를 클릭하면
uncaught
history.ts:561 Throttling navigation to prevent the browser from hanging. See https://crbug.com/1038223. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection

이라고 뜨네요ㅠㅠ

[codingapple]

onClick={()=>{ 여기안에 코드짭시다 }}

[조혜진]

감사합니다 선생님. 다시 한 번 강의 들으면서 체크해볼게요! 감사합니다 (--) (__)

[글쓴이]

글