1

私はgithubの erikras/react-redux-universal-hot-exampleリポジトリの作業中です。
私は実際の世界のシナリオを適切に反映するために動的なルートを作成しようとしています。React-Router/Redux - 動的同形経路

  1. クライアント/ entry.jsページ呼び出し、共有モジュール関数 'getRoutes' ストアパラメータに沿って通過します。

    const component = (
        <Router render={(props) => 
          <ReduxAsyncConnect {...props} helpers={{client}} 
           filter={item => !item.deferred} /> 
         } history={history}> 
        // where the routes are populated 
        {getRoutes(store)} // <-- function call 
        </Router> 
    

    );

  2. サーバーの同型-routes.config.server.jsは、クライアントのルートマッチングにgetRoutes(店舗)を呼び出します。

    match({history, routes: getRoutes(store), location: req.originalUrl},  
        (error, redirectLocation, renderProps) => { 
        ..... 
        }); 
    
  3. 共有ダイナミックroutes.shared.jsページJavaScriptの関数 'getRoutes' REGです:

    export default (store) => { 
        ...... 
    
        let dynRoutes= []; 
        store.dispatch(loadNav()).then(result => { 
        dynRoutes = result; 
        }) 
    
    return (
    <Route path="/" component={App}> 
        { /* Home (main) route */ } 
        <IndexRoute component={Home}/> 
        { /* Get dynamic routes from database */ } 
        { dynRoutes.length > 0 ? 
        <DynamicRoutes dynRoutes={dynRoutes} /> 
        : ''}  
        { /* Catch all route */ } 
        <Route path="*" component={NotFound} status={404} /> 
        </Route> 
        ) 
        }; 
    

秒の間dynRoutesの配列はルートコレクションを受け取るため、return文は再処理されず、 コンポーネントの長さがゼロであると判断され、コールバック値は無視されます。

これは、新しい戻り値を再読み込みする利点を提供するReactコンポーネントではありませんが、誰かがこのJavaScript関数をコールバック値で返す方法を理解していますか?

ありがとうございます。

+0

元の投稿では、dashboard.length> 0、s/b dynRoutes.length> 0でした。 –

答えて

1

短い答えは、私は、 ダイナミックroutes.shared.js非同期、
だけでなく、他の関数だけでなく 呼び出しを行うために必要とされるサーバー&クライアントの両方から。

私は 約束ダイナミックroutes.shared.jsを使用し、 サーバー/クライアント上非同期/待つはダイナミックroutes.shared.jsにを呼び出します。

データをJSONに投げ込むのは面倒ではありませんでした。

1.ダイナミックroutes.shared.js

 function routesWithStore(store) { 
     return new Promise(function(resolve, reject) { 
     // you can use something like this to actually have these 
     // routes in a database 
     // let dynRoutes= []; 
     // store.dispatch(loadNav()).then(result => { 
     // dynRoutes = result; 
     // }) 
     // resolve(dynRoutes.map(route => { 
     // ..... your code here ..... 
     // })) 
     resolve(
      { 
      path: '', 
      component: App, 
      childRoutes: [ 
       {path: '/', component: Home}, 
       {path: 'home', component: Home}, 
       {path: 'about', component: About}, 
       {path: '*', component: NotFound} 
      ] 
      } 
     ) 
     }); 
    } 

     function getRoutes(store) {  
     return(
      routesWithStore(store) 
     ) 
     } 

    exports.getRoutes = getRoutes; 

2.client/entry.js

// async call to dynamic-routes.shared.js //////// 
    async function main() { 
     try { 
     const result = await getRoutes(store); 
     processRoutes(result); 
     } catch(err) { 
     console.log(err.message) 
     } 
    } 

    function processRoutes(result) { 
     const component = (
     <Router render={(props) => 
      <ReduxAsyncConnect {...props} helpers={{client}} 
       filter={item => !item.deferred} /> 
       } history={history}> 
       {result} <------------- client value from dynamic-routes.shared.js 
       </Router> 
      ); 

     ReactDOM.render(
     <Provider store={store} key="provider"> 
      {component} 
     </Provider>, 
     document.querySelector('#root'); 
     ); 

_

if (process.env.NODE_ENV !== 'production') { 
     window.React = React; // enable debugger 

     if (!dest || !dest.firstChild 
       || !dest.firstChild.attributes 
       || !dest.firstChild.attributes['data-react-checksum']) { 
     console.error 
     ('Server-side React render was discarded. ' + 
     'Make sure that your initial render does not contain any client-side code.'); 
     } 
    } 

     if (__DEVTOOLS__ && !window.devToolsExtension) { 
     const DevTools = require('shared/redux/dev-tools/dev-tools.redux.shared'); 
     ReactDOM.render(
     <Provider store={store} key="provider"> 
      <div> 
      {component} 
      <DevTools /> 
      </div> 
     </Provider>, 
     document.querySelector('#root'); 
     ); 
     } 
    } 

    main(); 

3.同型-routes.config.server

 module.exports = (app) => { 
     app.use((req, res) => { 
     if (__DEVELOPMENT__) { 
      // Do not cache webpack stats: the script file would change since 
      // hot module replacement is enabled in the development env 
      webpackIsomorphicTools.refresh(); 
     } 
     const client = new ApiClient(req); 
     const memoryHistory = createHistory(req.originalUrl); 
     const store = createStore(memoryHistory, client); 
     const history = syncHistoryWithStore(memoryHistory, store); 

     function hydrateOnClient() { 
      res.send('<!doctype html>\n' + 
      ReactDOM.renderToString(

       <Html assets={webpackIsomorphicTools.assets()} 
        store={store}/>)); 
     } 

     if (__DISABLE_SSR__) { 
      hydrateOnClient(); 
      return; 
     } 

_

 // Async call to dynamic-routes.shared.js //////// 

     async function main() { 
      try { 
      const routesResult = await getRoutes(store); 
      // pass routesResult below 
      match({history, routes: routesResult, location: req.originalUrl}, 
       (error, redirectLocation, renderProps) => { 
       if (redirectLocation) { 
       res.redirect(redirectLocation.pathname + redirectLocation.search); 
       } else if (error) { 
       console.error('ROUTER ERROR:', pretty.render(error)); 
       res.status(500); 
       hydrateOnClient(); 

_

   } else if (renderProps) { 
       loadOnServer({...renderProps, store, helpers: {client}}).then(() => { 
        const component = (
        <Provider store={store} key="provider"> 
         <ReduxAsyncConnect {...renderProps} /> 
        </Provider> 
       ); 

        res.status(200); 

        global.navigator = {userAgent: req.headers['user-agent']}; 

        res.send('<!doctype html>\n' + 
        ReactDOM.renderToString(
         <Html assets={webpackIsomorphicTools.assets()} 
          component={component} store={store}/>)); 
       }); 
       } else { 
       res.status(404).send('Iso Routes Not Found ' + routeResult); 
       } 
      }); 

      } catch(error) { 
      console.error(error); 
      } 
     } 

     main(); 

     }); 
    }; 

私は、これは彼らの同型ルートがダイナミックにするためにお探しの方に役立ちます願っています。
アメリカをもう一度偉大にしましょう!

0

標準溶液は、コールバックが再レンダリングトリガーに戻ったときにthis.setState({ dynRoutes })を使用することができ、その場合で反応コンポーネントのライフサイクルを、次の実数リアクト成分であることがgetRoutesを設定することです。現在の設定では、getRoutesは発信者/親に再レンダリングを強制することはできません。

あなたは約束ハンドラがsetStateと階層までさらにコンポーネント内に再レンダリングする、または再ルートReactDOM.renderを呼び出すトリガーするように、コンポーネントのレンダリングからstore.dispatch(loadNav())コールを分離し、そしてコードを構造化する必要があります。

関連する問題