react-redux-react-router v4 url, 업데이트되었지만 구성 요소가 없습니다.

Question

먼저, 모든 예제를 통해 읽었으며 다양한 보일러 플레이트를 통해 다른 사람들이이 작업을 수행 한 방법을 살펴 보았습니다. 반응 라우터 v4에서 <Link>을 클릭하면 페이지를로드하는 데 문제가 있습니다. 나는 또한 반응 - 라우터 - 연결된 패키지를 설치하고 그것을 밖으로 시도하고 있지만 개선은 볼 수 있습니다 (그러나 그것은 redux - 로거 좋은 변화를 보여줍니다).

현재 URL이 업데이트되고 수동으로 URL을 변경하고 Enter 키를 누르면 다음 페이지가로드됩니다. 그러나 링크를 클릭하면 리디렉션되지 않습니다. 나는 또한 참조 용으로 프로젝트를위한 create-react 앱을 사용하고있다. 실제 앱은의 정확한 예로서 공식 redux 문서에 설정되어 있습니다. 간단하게하기 위해 경로를 변경하여 서로에게 리디렉션 만하는 기본 구성 요소에 대한 링크 만 포함 시켰습니다. 당신이 볼 수 있듯이 재 지정 목적

import React from 'react'; 
import { connect } from 'react-redux'; 
import { push } from 'connected-react-router'; 
import { withRouter } from 'react-router'; 
import { Link } from 'react-router-dom'; 
import Button from 'material-ui/Button'; 

class NewComponent extends React.Component { 
    redirectPage =() => { this.props.dispatch(push('/')); }; 
    redirectPage1 =() => { this.props.dispatch(push('/new')); }; 

    render() { 
    return (
     <div> 
     NEW COMPONENT 
     <Button onClick={this.redirectPage}>Redirect /</Button> 
     <Button onClick={this.redirectPage1}>Redirect new</Button> 
     <Link to='/new'>Redirect Link</Link> 
     </div> 
    ) 
    } 
} 

export default withRouter(connect()(NewComponent)); 

에 대한

import React from 'react'; 
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 
import { Provider } from 'react-redux'; 
import { ConnectedRouter } from 'connected-react-router' 
// import App from './App'; 
import NewComponent from './NewComponent'; 
import OldComponentent from './OldComponent'; 

const Root = ({ store, history }) => (
    <Provider store={store}> 
    <ConnectedRouter history={history}> 
     <Router> 
     <Switch> 
      <Route exact path='/' component={OldComponentent}/> 
      <Route path='/new' component={NewComponent}/> 
      {/* <Route path='/' component={App}/> 
      <Route path='/:filter' component={App}/> */} 
     </Switch> 
     </Router> 
    </ConnectedRouter> 
    </Provider> 
) 

export default Root; 

홈 구성 요소 내 경로

import React from 'react'; 
import { connect } from 'react-redux'; 
import { push } from 'connected-react-router'; 
import { withRouter } from 'react-router'; 
import { Link } from 'react-router-dom'; 
import Button from 'material-ui/Button'; 

class OldComponent extends React.Component { 
    redirectPage =() => { this.props.dispatch(push('/new')); }; 
    redirectPage1 =() => { this.props.dispatch(push('/')); }; 

    render() { 
    return (
     <div> 
     OLD COMPONENT 
     <Button onClick={this.redirectPage}>Redirect new</Button> 
     <Button onClick={this.redirectPage1}>Redirect /</Button> 
     <Link to='/new'>Redirect Link</Link> 
     </div> 
    ) 
    } 
} 

export default withRouter(connect()(OldComponent)); 

다른 기본 구성 요소를 수용

Root.js, 그들은 본질적으로 동일합니다 구성 요소에 약간의 차이가 있습니다. URL은 /new or /으로 변경되며 반응 라우터 연결 패키지에 의해 생성 된 @@ router/LOCATION-CHANGE 상태 객체에있는 경로 이름도 업데이트됩니다. <Link> 태그를 클릭했지만 리디렉션이없는 URL도 변경됩니다.

이 접근 방법에 대한 도움을 주시면 감사하겠습니다.

Answer 1

@Supertopoz 님이 올린 댓글 this.props.history.push('/pathname') 작품입니다. 그러나이를 설정 한 후 <Link>도 이제 작동합니다. 나는 전체적으로 withRouter을 사용하고 있기 때문에 작동하도록 또 다른 중요한 요소가되었습니다.