React-Router-Redux가 LOCATION_CHANGE를 두 번 발송하고 검색 값을 제거합니다.

Question

react-router 4.x와 호환되는 다음 (5.0.0-alpha.6) 버전의 react-router-redux를 사용하고 있습니다. 다음 페이지로 리디렉션하는 동안 url에 매개 변수를 설정하려고합니다.

다음 페이지로 이동할 때마다. 나는 그것이 @LOCATION_CHANGE 2 번, in the second time it removes search value라고 부르는 것을 알고 있습니다. 내가 버튼 이벤트에서

import { requireAuth } from '../components/AuthenticatedComponent' 
import createHistory from 'history/createBrowserHistory' 

const history = createHistory() 

return (
    <ConnectedRouter history={history}> 
     <div className="container"> 
     <Header /> 
     <Switch> 
      <Route exact path="/" component={Home} /> 
      <Route path="/about" component={requireAuth(About)} /> 
      <Route path="/login" component={Login} /> 
      <Route component={NotFound} /> 
     </Switch> 
     </div> 
    </ConnectedRouter> 
) 

AuthenticatedComponent.js

import { push } from 'react-router-redux' 

export function requireAuth(Component) { 

class AuthenticatedComponent extends React.Component { 

    componentWillMount() { 
     this.checkAuth(this.props.isAuthenticated); 
    } 

    componentWillReceiveProps(nextProps) { 
     this.checkAuth(nextProps.isAuthenticated); 
    } 

    checkAuth(isAuthenticated) { 
     if (!isAuthenticated) { 
      let redirectAfterLogin = this.props.location.pathname; 
      this.props.dispatch(push({pathname: "/login", search:`?redirect=${redirectAfterLogin}`})) 
     } 
    } 
//.... 

}

Answer 1

그것을 처리하는 경우, 그것은 당신이 nextProps에서 경로 이름을 통과해야한다고 생각 잘 작동합니다.

class AuthenticatedComponent extends React.Component { 

//... 

componentWillReceiveProps(nextProps) { 
    this.checkAuth(nextProps.isAuthenticated); // <--- call checkAuth 
} 

checkAuth(isAuthenticated) { 
    if (!isAuthenticated) { // <-- isAuthenticated is in nextProps 

     // this.props.location.pathame is not in nextProps 
     let redirectAfterLogin = this.props.location.pathname; 
     this.props.dispatch(push({pathname: "/login", search:`?redirect=${redirectAfterLogin}`})) 
    } 
} 

//... 

---

class AuthenticatedComponent extends React.Component { 

componentWillMount() { 
    this.checkAuth(this.props); 
} 

componentWillReceiveProps(nextProps) { 
    this.checkAuth(nextProps); // <--- call checkAuth 
} 

checkAuth({isAuthenticated, location, dispatch}) { 
    if (!isAuthenticated) { 
     let redirectAfterLogin = location.pathname; 
     dispatch(push({pathname: "/login", search:`?redirect=${redirectAfterLogin}`})) 
    } 
} 

//...