如何使用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:

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

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

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

2 个解决方案

#1

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

(确保使用npm安装react-router!)

To use react-router, you do the following:

要使用react-router,请执行以下操作:

Create a file with routes defined using Route, IndexRoute components

使用Route,IndexRoute组件创建包含路由的文件
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)

注入路由器(带'r'!)组件作为应用程序的*组件,传递routes文件中定义的路由和一种历史记录(hashHistory,browserHistory)
Add {this.props.children} to make sure new pages will be rendered there

添加{this.props.children}以确保在那里呈现新页面

Use the Link component to change pages

使用“链接”组件更改页面

Step 1 routes.js

第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)

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

Step 3 The App component (props.children)

第3步App组件(props.children)

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

在App组件的渲染中,添加{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

步骤4使用链接进行导航

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

组件中的任何位置渲染函数返回JSX值,使用Link组件:

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

#2

This is a broad question and there are multiple ways you can achieve this. In my experience, I've seen a lot of single page applications having an entry point file such as index.js. This file would be responsible for 'bootstrapping' the application and will be your entry point for webpack.

这是一个广泛的问题,您可以通过多种方式实现这一目标。根据我的经验,我看过很多单页应用程序都有一个入口点文件,比如index.js。该文件将负责“引导”应用程序,并将成为webpack的入口点。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Application from './components/Application';

const root = document.getElementById('someElementIdHere');

ReactDOM.render(
  <Application />,
  root,
);

Your <Application /> component would contain the next pieces of your app. You've stated you want different pages and that leads me to believe you're using some sort of routing. That could be included into this component along with any libraries that need to be invoked on application start. react-router, redux, redux-saga, react-devtools come to mind. This way, you'll only need to add a single entry point into your webpack configuration and everything will trickle down in a sense.

您的组件将包含您的应用程序的下一部分。你已经说过你想要不同的页面,这让我相信你正在使用某种路由。这可以包含在此组件中,以及需要在应用程序启动时调用的任何库。我想到了react-router,redux,redux-saga,react-devtools。这样,您只需要在webpack配置中添加一个入口点,从某种意义上说,一切都会崩溃。

When you've setup a router, you'll have options to set a component to a specific matched route. If you had a URL of /about, you should create the route in whatever routing package you're using and create a component of About.js with whatever information you need.

设置路由器后,您可以选择将组件设置为特定的匹配路由。如果您的URL为/ about,则应在您正在使用的任何路由包中创建路由,并使用您需要的任何信息创建About.js的组件。

#1