3
1398

리액트 새로고침 질문있습니다..


리액트에서 코딩을 시작한지 어엿안된 새내기입니다..

다름이아니라 리액트에서 페이지를 이동하게되고,

새로고침을 해야지만 그 페이지에대한 html이 출력되는데 

경로설정이 문제가아니고 제대로 출력은되는데 왜 새로고침해야지만 인식이되는지 의문입니다 ㅠ ... 

무슨이유일까요 .. ? 


    render() {
        return (
    <Fragment>
        <Router>
        <Link to="/Test_App">
            <button>이동</button>
        </Link>
        </Router>
    </Fragment>
        );
    }
<<Login.js>>

 render() {
        return (
            <Router>
            <div>
                <Switch>
                    <Route exact path='/' component={Login}/>
                    <Route path='/Test_App' component={Test}/>
                </Switch>

                {/*<Login/>*/}
            </div>
            </Router>
        );
    }

<<App.js>>


이런식으로 Login.js와 app.js입니다 ㅠ 

1
  • 답변 3

  • seacont
    2020-07-31 23:26:52

    Login.js의 <Router> 컴포넌트를 제거해보시겠어요?

  • 헐 해결했습니다 감사해요 이게 이유가 어떻게되나요 ..?

  • seacont
    2020-08-01 01:06:13

    <Router> 컴포넌트 하나당 서로 독립적인 별도의 리액트 라우터 앱이 만들어집니다. <Link>는 URL을 바꿔주는데 이것은 <Link>를 감싸고 있는 라우터인 Login.js의 <Router> 컴포넌트 안에서만 효과가 있는 걸로 보이네요. 그런데 해당 컴포넌트에는 URL에 대응되는 <Route>가 없습니다. 새로고침을 하면 App.js이 Login.js보다 먼저 실행되는데 여기에는 URL에 대응되는 <Route>가 있어 해당 컴포넌트를 렌더링합니다. 이를 확인하시려면 Login.js의 <Router> 안에 아래 코드를 넣어보세요.

    <Switch>
      <Route path='/Test_App' component={Test}/>
    </Switch>


  • 로그인을 하시면 답변을 등록할 수 있습니다.