开箱即用,ReactQL附带一对"页面"定义如下:
Variable=$()
但是,export default () => (
<div>
<Helmet
title="ReactQL application"
meta={[{
name: 'description',
content: 'ReactQL starter kit app',
}]} />
<div className={css.hello}>
<img src={logo} alt="ReactQL" className={css.logo} />
</div>
<hr />
<GraphQLMessage />
<hr />
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/page/about">About</Link></li>
<li><Link to="/page/contact">Contact</Link></li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/page/:name" component={Page} />
<hr />
<p>Runtime info:</p>
<Stats />
<hr />
<p>Stylesheet examples:</p>
<Styles />
</div>
);
和Home
只是在同一文件中定义的组件。假设我不想加载所有代码,直到您导航到该页面,我如何&#34;代码拆分&#34;并将每个页面移动到一个单独的webpack块中?
请注意,ReactQL支持SSR和React-Router does not。我可以问的是什么?
答案 0 :(得分:2)
有关代码分割和SSR工作的示例,请参阅this issue。
我目前正在制作一个指南和辅助组件,它将更进一步,并提供一些样板来以更常规的方式执行此操作。
使用React Router肯定有可能:见https://reacttraining.com/react-router/web/guides/code-splitting
完成后会更新https://reactql.org并在此处发布更新。