2017-04-14 11 views
0

私はreact-routerに問題があります。私は "/ portal/clients/systems/configure"というページにあります。システムを削除すると、ページを "/ portal/clients/systems"に変更したいと思います。react-router router.pushはコンポーネントを起動しません.WillMount

私はreact-rouerのwithRouterを使用してルータにアクセスしていますが、router.pushを実行しますが、「/ portal/clients // systems」ページはリロードされません。 componentWillMountはまったく起動しません。

私はこれに間違っていますか?

app.js:

const SystemConfigureAsync = (nextState, cb) => { 
    require.ensure([], require => 
     cb(null, require('./modules/systems/SystemConfigure.jsx') 
    )); 
}; 

const App =() => (
    <Router history={browserHistory}> 
     <Route path="/portal" component={Container} onEnter={redirector.checkRequirements}> 
      <Route path="clients/:org"> 
       <Route path="systems" getComponent={SystemsAsync}> 
        <Route path=":system_id" getComponent={SystemAsync}> 
         <Route path="configure" getComponent={SystemConfigureAsync} /> 
        </Route> 
       </Route> 
      </Route> 
     <Route path="*" component={NotFound} /> 
    </Router> 
); 

./modules/systems/SystemConfigure.jsx:

const React = require('react'); 
const { withRouter } = require('react-router'); 

const SystemConfigure = withRouter(React.createClass({ 
    render() { 
     const { org: orgId } = this.props.params; 
     const { router } = this.props; 

     return (
      <ContentSpinner loadingMessage="Loading System" loading={this.state.isLoading}> 
       <ConfigureSystem 
        systemId={this.state.model.get('system_id')} 
        model={this.state.model} 
        deleteable={this.state.model.get('deletable')} 
        onDelete={() => { 
         router.push(`/portal/clients/${orgId}/systems`); 
        }} 
       /> 
      </ContentSpinner> 
     ); 
    }, 
})); 

module.exports = SystemConfigure; 
+0

あなた 'SystemsAsync'は文句を言わない、最初から開始されます新しいパスには前のパスと同じコンポーネントが含まれているためです。ただし、再レンダリングされます。ロジックを 'componentWillReceiveProps'で実行する必要があります。 – Panther

+0

それは同じ小道具です。最後に/ delete /:systemIdのようなものを追加して、componentWillReceivePropsをトリガする必要がありますか? –

答えて

0

パンサーさんのコメントには、多くのことを助けました。

私はルートを追加しました:

<Route path="systems/delete-system/:delete_system_id" getComponent={SystemsAsync} /> 

、これはcomponentWillReceivePropsは、次のようになります。今、魔法のように

componentWillReceiveProps(nextProps) { 
    const { router } = this.props; 
    const { org: orgId, delete_system_id } = nextProps.params; 

    if (delete_system_id) { 
     this.setState({ systemishes: reject(this.state.systemishes, sys => sys.system_id === delete_system_id) }); 
     router.push(isMsp() ? `/portal/partners/${orgId}/systems` : `/portal/clients/${orgId}/systems`); 
    } 
}, 

作品

関連する問題