Определение маршрутов в конструкторе

Question

У меня есть компонент под названием Root, которая делает маршруты для моего index.js

const store = configureStore(); 
ReactDOM.render(
    <Root store={store} />, 
    document.getElementById('root'), 
); 

мне нужно сделать это, потому что я подключаю Root к redux, это связано с корневой авторизации с onEnter, и он должен работать с состоянием redux.

Так вот корень:

class Root extends React.Component { 
    constructor(props) { 
    super(props); 
    // some stuff 
    } 

    requireAuthentication = (nextState, replace) => { 
    // some stuff for managing auth 
    }; 

    render() { 
    const { store } = this.props; 
    return (
     <div> 
     <Provider store={store}> 
      <Router history={browserHistory}> 
      <Route path="/" component={App}> 
       <Route component={Dashboard}> 
       <IndexRoute component={Home} onEnter={requireAuthentication}/> 
       </Route> 
       <Route path="login" component={Login} /> 
      </Route> 
      </Router> 
     </Provider> 
     </div> 
    ); 
    } 
} 

// some definitions for connecting Root to redux 

export default connect(mapStateToProps, mapDispatchToProps)(Root); 

Хорошо ... это делает хорошо, но у меня есть предупреждение:

Warning: [react-router] You cannot change <Router routes>; it will be ignored 

маршрутов, также работает отлично ... но я хочу разрешить предупреждение. Итак ... googling Я нашел проблему возможным решением: объявите routes внутри конструктора и передайте его Router через props.

Мой конструктор Я сделал это:

import React, { PropTypes } from 'react'; 
import { connect, Provider } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { Router, browserHistory, Route, IndexRoute } from 'react-router'; 
import { loginActions } from '../actions'; 
import { App, Dashboard, Home, Login } from '../features'; 
import adalHandler from '../services/adal'; 

class Root extends React.Component { 
    constructor(props) { 
    super(props); 
    const routes = (
     <Route path="/" component={App}> 
     <Route component={Dashboard}> 
      <IndexRoute component={Home} /> 
     </Route> 
     <Route path="login" component={Login} /> 
     </Route> 
    ); 
    // some stuff 
    } 
    } 

    requireAuthentication = (nextState, replace) => { 
    // stuff 
    }; 

    render() { 
    const { store } = this.props; 
    return (
     <div> 
     <Provider store={store}> 
      <Router history={browserHistory} routes={this.routes} /> 
     </Provider> 
     </div> 
    ); 
    } 
} 

// stuff 

export default connect(mapStateToProps, mapDispatchToProps)(Root); 

но теперь, это не делает хорошо.

Как его решить?

Answer 1

Объект this.routes не определен в методе визуализации.

Например, вы можете заменить const routes = (...); на конструктор с this.routes = (...);, чтобы сделать объект доступным в методе визуализации.