短い答えは、私は、 ダイナミック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();
});
};
私は、これは彼らの同型ルートがダイナミックにするためにお探しの方に役立ちます願っています。
アメリカをもう一度偉大にしましょう!
元の投稿では、dashboard.length> 0、s/b dynRoutes.length> 0でした。 –