react 创建新页面,如何使用react创建多个页面应用程序

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

解决方案

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

To use react-router, you do the following:

Create a file with routes defined using Route, IndexRoute components

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)

Add {this.props.children} to make sure new pages will be rendered there

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 (

);

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(

,

document.getElementById('your-app')

);

Step 3 The App component (props.children)

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

render() {

return (

This is my website!

{this.props.children}

Your copyright message

);

}

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';

(...)

Click me