How to create multiple page app using react

Question

I have created a single page web app using react js. I have used webpack to create bundle of all components. But now I want to create many other pages. Most of pages are API call related. i.e. in the index.html, I have displayed content from API. I want to insert content in another page parsing data from API. Webpack compresses everything of react in a file which is bundle.js. However, the configuration of webpack is as follow:

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.stringify('production')         }     }),     new webpack.optimize.UglifyJsPlugin({         compress: {             warnings: false         }     }) ] }  module.exports = config; 

Now, I am confused what kind of configuration of webpack will be for other page or what is the correct way to build multi-pages app using react.js

Answer 1

(Make sure to install react-router using npm!)

To use react-router, you do the following:

1. Create a file with routes defined using Route, IndexRoute components

2. Inject the Router (with 'r'!) component as the top-level component for your app, passing the routes defined in the routes file and a type of history (hashHistory, browserHistory)

3. Add {this.props.children} to make sure new pages will be rendered there
4. Use the Link component to change pages

Step 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 (   <Route path="/" component={App}>     <IndexRoute component={MainPage} />     <Route path="/some/where" component={SomePage} />     <Route path="/some/otherpage" component={SomeOtherPage} />   </Route> ); 

Step 2 entry point (where you do your DOM injection)

// You can choose your kind of history here (e.g. browserHistory) import { Router, hashHistory as history } from 'react-router'; // Your routes.js file import routes from './routes';  ReactDOM.render(   <Router routes={routes} history={history} />,   document.getElementById('your-app') ); 

Step 3 The App component (props.children)

In the render for your App component, add {this.props.children}:

render() {   return (     <div>       <header>         This is my website!       </header>        <main>         {this.props.children}       </main>        <footer>         Your copyright message       </footer>     </div>   ); } 

Step 4 Use Link for navigation

Anywhere in your component render function's return JSX value, use the Link component:

import { Link } from 'react-router'; (...) <Link to="/some/where">Click me</Link>