J’ai créé une application Web d’une seule page à l’aide de react js. J’ai utilisé webpack
pour créer un ensemble de tous les composants. Mais maintenant, je veux créer beaucoup d’autres pages. La plupart des pages sont liées aux appels API. c’est-à-dire que dans le index.html
, j’ai affiché le contenu de l’ API
. Je souhaite insérer du contenu dans une autre page en analysant les données de l’API. Webpack compresse tout ce qui se bundle.js
dans un fichier bundle.js
. Cependant, la configuration de webpack
est la suivante:
const webpack = require('webpack'); var config = { entry: './main.js', output: { path:'./', filename: 'dist/bundle.js', }, devServer: { inline: true, port: 3000 }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] }, plugins: [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.ssortingngify('production') } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] } module.exports = config;
Maintenant, je ne webpack
pas quel type de configuration de webpack
sera pour une autre page ou quelle est la bonne façon de créer une application multi-pages à l’aide de react.js
(Assurez-vous d’installer react-router en utilisant npm!)
Pour utiliser react-router, procédez comme suit:
Créer un fichier avec des itinéraires définis à l’aide des composants Route, IndexRoute
Injectez le composant Router (avec ‘r’!) En tant que composant de niveau supérieur pour votre application, en transmettant les routes définies dans le fichier de routes et un type d’historique (hashHistory, browserHistory)
Étape 1 routes.js
import React from 'react'; import { Route, IndexRoute } from 'react-router'; /** * Import all page components here */ import App from './components/App'; import MainPage from './components/MainPage'; import SomePage from './components/SomePage'; import SomeOtherPage from './components/SomeOtherPage'; /** * All routes go here. * Don't forget to import the components above after adding new route. */ export default ( );
Étape 2 point d’entrée (où vous effectuez votre injection DOM)
// You can choose your kind of history here (eg browserHistory) import { Router, hashHistory as history } from 'react-router'; // Your routes.js file import routes from './routes'; ReactDOM.render( , document.getElementById('your-app') );
Étape 3 Le composant App (props.children)
Dans le rendu de votre composant App, ajoutez {this.props.children}:
render() { return ( This is my website! {this.props.children} ); }
Étape 4 Utilisez Link pour la navigation
N’importe où dans la valeur de retour JSX de votre fonction de rendu de composant, utilisez le composant Link:
import { Link } from 'react-router'; (...) Click me
C’est une question vaste et il y a plusieurs façons d’y parvenir. D’après mon expérience, de nombreuses applications comportant une seule page possèdent un fichier de point d’entrée tel que index.js
. Ce fichier serait responsable du “démarrage” de l’application et sera votre point d’entrée pour WebPack.
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import Application from './components/Application'; const root = document.getElementById('someElementIdHere'); ReactDOM.render( , root, );
Votre composant
contiendrait les prochaines pièces de votre application. Vous avez déclaré vouloir des pages différentes, ce qui me porte à croire que vous utilisez une sorte de routage. Cela pourrait être inclus dans ce composant avec toutes les bibliothèques qui doivent être appelées au démarrage de l’application. react-router
, redux
, redux-saga
, react-devtools
viennent à l’esprit. De cette façon, il vous suffira d’append un seul point d’entrée dans la configuration de votre pack Web et tout se déroulera dans un sens.
Lorsque vous avez configuré un routeur, vous avez la possibilité de définir un composant sur un itinéraire spécifique. Si vous avez une URL de /about
, vous devez créer la route dans le package de routage que vous utilisez et créer un composant de About.js
avec les informations dont vous avez besoin.