0
をルーティングに反応Iは、ルータ2と反応使用して、私は昨年始まったプロジェクトを使用していますが、これはルータ2は、ルータ2、より効率的な
const routes = (
<Router>
<Route path="/" component={Home}/>
<Route path="about" component={About}/>
<Route path="work" component={Work}/>
<Route path="contact" component={Contact}/>
<Route path="project/:project" component={ProjectPage}/>
<Route path="tictactoe/demo" component={TicTacToePage}/>
<Route path="blog/:blogid" component={BlogPage}/>
<Route path="*" component={NotFoundPage}/>
</Router>
);
export default routes;
プロジェクトページの詳細は、それぞれに反応使用してルーティングするための私の現在の設定ですサーバー上のJSONに保存され、次のように私のプロジェクトページがあるされています
class App extends Component {
render() {
const url = this.props.routeParams.project;
const Project = Data.find(page => page.name === url);
if (Project !== undefined) {
return (
<Layout>
<div className="page-container">
<h1> { Project.title } </h1>
</div>
</Layout>
)
} else {
return (
<Layout>
<NotFoundPage />
</Layout>
)
}
}
}
export default App;
によるデータに必要なルックに当然のプロジェクトページをロードするとき、私は通常のロード速度より少し遅く経験しています.jsonファイル：
export const Data = [
{id: 0, name: 'tictactoe', title: 'Coding an unbeatable TicTacToe opponent', demo: 'tictactoe/demo'}
]
これは、Reactのサーバー側に基づいたよりダイナミックなルーティングを提供する最善の方法ですか？私はReactにとって非常に新しく、これをすべて試してみようとしています！標準ページ間の変更は非常に速いですが、プロジェクトページを読み込むと白い画面が点滅します。
編集：私は私のcomponentWillMountに約束要求を追加しようとしました：
componentWillMount() {
const url = this.props.routeParams.project;
let promise = new Promise(function(resolve, reject) {
let response = Data.find(page => page.name === url);
resolve(response);
}).then(project => {
this.setState({
project: project,
},() => {
console.log("Project loaded: ");
console.log(project.title);
});
});
}
データが大きすぎてアプリケーションの処理速度が低下する場合、これに対して何をしたいですか？ – lilezek
誰かがルーティングやコンテンツを読み込むためのより良い方法を知っていたのかどうか疑問に思っていました。 – Olly
データのロード中にフェードアウト効果を加えることができます。ところで、あなたのJSONファイルの大きさはどれくらいですか？あなたが公開した例は、影響を与えるのに十分な大きさではありません。 – lilezek