2017-04-14 38 views
0

我遇到了react-router问题。我在页面“/ portal/clients // systems/configure”,我想在删除系统时将页面更改为“/ portal/clients // systems”。react-router router.push不会触发componentWillMount

我正在使用react-rouer的路由器来访问路由器,并且我做了一个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`); 
    } 
}, 

就像一个魅力现在