React Router 4データベースから即座にロードされるダイナミックコンポーネント

Question

2.5.1からReact Router 4.11に移行します。 旧バージョンでは、私のISOMORPHIC/UNIVERSALアプリは起動時にデータベースからルート/コンポーネントを動的に取得します。その同じ機能を4.11で保持したいと思います。

//////////////////////// 
// from client entry.js 
//////////////////////// 
async function main() { 
    const result = await _createRouter(routes) 
    ReactDOM.render(  
     <Provider store={store} key="provider"> 
     <Router history={history}> 
      {result} 
     </Router> 
     </Provider> 
    dest 
); 
} 

////////////////////// 
// from shared modules 
////////////////////// 
function _createRouter(routes) { 
    const childRoutes = [ // static routes, ie Home, ForgotPassword, etc]; 

     //////////////////////// 
     // crucial part here 
     //////////////////////// 
     routes.map(route => { 
     const currComponent = require('../../client/components/' + route.route + '.js'); 
     const obj = { 
      path: route.route, 
      component: currComponent 
     }; 
     childRoutes.push(obj) 
     }); 

     childRoutes.push({path: '*', component: NotFoundComponent}); 
     return { path: '', component: .APP, childRoutes: childRoutes }; 
    } 

：反応ルータの2.5.1バージョンで

は、私のような私のDBから取得したデータであるルートパラメータと_createRouter呼び出すことにより、データベースから&部品ルートを動的にロードすることができました

4.11で同じイベントを実行してもドキュメントが見つからないことに私は不満を持っています。

render() { 
    return (
      <Route path='/' component={Home} /> 
      <Route path='/home' component={About} /> 
      <Route path='/topics' component={Topics} /> 
    ) 
} 

これは、特に大規模なアプリケーションのために私には現実世界を表示されません：すべての例では、ハードコーディングされたようにルートがそう示しています。

データベースから私のルート/コンポーネントを動的にロードできるのであれば、私は2.5.1で4.11と同じ成功を収めていますか？

ありがとうございます！

Answer 1

新しいバージョンでは、各経路は単なる通常の反応成分です。したがって、他のコンポーネントを作成するときと同じように、動的にルートを作成できるはずです。

render() { 
    const { routes } = this.props; 

    return (
    <div> 
     { 
     routes.map(route => <Route path={route.path} component={route.component} />) 
     } 
    </div> 
); 
} 

ルートをレンダリングする前に、コンポーネントを動的にインポートする必要があります。

Answer 2

多分、このコードはこの問題の解決策です。 "動的ルートインポートコンポーネント"

import React, { 
    Component 
} from "react"; 

const Containers =() => (< div className = "containers" > Containers < /div>); 

class ComponentFactory extends Component{constructor(props){super(props);this.state={RouteComponent:Containers}} 
    componentWillMount() { 
     const name = this.props.page; 
     import ('../pages/' + name + '/index').then(RouteComponent => { 
      return this.setState({ 
       RouteComponent: RouteComponent.default 
      }) 
     }).catch(err => console.log('Failed to load Component', err)) 
    } 
    render() { 
     const {RouteComponent } = this.state; 
     return (<RouteComponent { ...this.props }/>); 
    } 
} 
export default ComponentFactory 



<Route path="/:page" 
     render={rest => <ComponentFactory 
     page={rest.match.params.page} 
     {...rest}/>}/>