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

问题描述：

我使用react js创建了一个单页Web应用程序。我使用 webpack 来创建所有组件的捆绑包。但现在我想创建许多其他页面。大多数页面都与API调用相关。即在 index.html 中，我显示了来自 API 的内容。我想在另一个页面中插入内容来解析API中的数据。 Webpack压缩文件中的所有内容，该文件是 bundle.js 。但是， webpack 的配置如下：

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;

现在，我很困惑 webpack的配置将用于其他页面或使用 react.js构建多页面应用程序的正确方法

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

答

（确保使用npm安装react-router！）

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

要使用react-router，请执行以下操作：

To use react-router, you do the following:

使用Route，IndexRoute组件创建路径的文件

注入路由器（带'r'！）组件作为应用程序的*组件，传递路由文件中定义的路由和类型历史记录（hashHistory，browserHistory）

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)

步骤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>
);

第2步 入口点（进行DOM注入的地方））

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

第3步 应用程序组件（道具.children）

Step 3 The App component (props.children)

在App组件的渲染中，添加{this.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>
  );
}

第4步 使用链接进行导航

组件渲染函数返回JSX值的任何地方，使用链接组件：

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>

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

相关推荐