React Router V4에서 상태를 location.pathname으로 설정할 수 없습니다.

Question

내 구성 요소의 상태를 URL의 현재 경로 이름으로 설정하려고합니다. 특히, 나는대로 App.js에 정의 된 내 ResponsiveDrawer 구성 요소에서이 작업을 수행 할 : 그 다음 코드는 트리거해야 한 ResponsiveDrawer 구성 요소에서,

class App extends Component { 
    render() { 
    return (
     <Router> 
     <ResponsiveDrawer> 
      <div className="App"> 
      <Route exact path="/" component={Administrator} /> 
      <Route path="/admin" component={Administrator} /> 
      <Route exact path="/jobs" component={Jobs} /> 
      <Route path="/jobs/:id" render={({match}) => <ViewJob id={match.params.id} />} /> 
      <Route path="/entries/:jobId/:entryId" render={({match}) => <Entry jobId={match.params.jobId} entryId={match.params.entryId} />} /> 
      <Route exact path="/reports" component={Reports} /> 
      <Route path="/reports/:jobId" render={({match}) => <JobReport id={match.params.jobId} />} /> 
      <Route path="/reports/activity" component={ActivityReport} /> 
      </div> 
     </ResponsiveDrawer> 
    </Router> 

    ); 
    } 
} 

이제 때 URL 변경 :

class ResponsiveDrawer extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     mobileOpen: false, 
     adminOpen: true, 
     jobsOpen: false, 
     reportsOpen: false, 
     activePath: '' 
    }; 
    this.setActiveState = this.setActiveState.bind(this); 
    this.isActiveFunc = this.isActiveFunc.bind(this); 
    } 


    setActiveState = (path) => { 
    this.setState({activePath: path}); 
    }; 

    isActiveFunc = (match, location) => { 
    console.log(location.pathname) 
    this.setActiveState(location.pathname); 
    return match 
    }; 

    render() { 
     <NavLink isActive={this.isActiveFunc} className={classes.subLink} to={{ pathname: "/admin/users" }}> 
     <ListItem button className={classes.nested}> 
     <ListItemText inset primary="Users" /> 
     </ListItem> 
     </NavLink> 

NavLink를 클릭 할 때마다 현재 위치가 올바르게 기록됩니다. 그러나, 나는 다음과 같은 오류 얻을 location.pathname의 값으로 상태를 설정하려고 :

proxyConsole.js:54 Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount .

을 그리고 브라우저는 무한 루프로 전환되고

어떤 아이디어 충돌? isActive에서 전달 함수가 즉시 NavLink 기능을 렌더링에 호출 당신이이 줄에서 볼 수

Answer 1

,

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js#L34

.

setState은 무한한 렌더링 루프를 유발할 수 있으므로 render에 분명히 사용하면 안됩니다.

대신 componentWillReceiveProps을 사용해야합니다.