如何使用反应创建多页面应用程序 [英] How to create multiple page app using react

问题描述

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

const webpack = require('webpack');变量配置 = {条目:'./main.js'，输出: {小路:'./'，文件名:'dist/bundle.js',},开发服务器:{内联:真实，端口:3000},模块: {装载机: [{测试:/.jsx?$/,排除:/node_modules/，装载机:'巴别塔'，询问: {预设:['es2015', 'react']}}]},插件: [新的 webpack.DefinePlugin({'process.env':{'NODE_ENV': JSON.stringify('production')}}),新的 webpack.optimize.UglifyJsPlugin({压缩:{警告:错误}})]}module.exports = config;

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

解决方案

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

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

1. 创建一个带有路由的文件，使用Route、IndexRoute组件

2. 注入 Router(带有 'r'！)组件作为应用程序的顶级组件，传递路由文件中定义的路由和一种历史类型(hashHistory、浏览器历史记录)

3. 添加{this.props.children}以确保新页面将在那里呈现
4. 使用链接组件来更改页面

步骤 1routes.js

从'react'导入React；从反应路由器"导入 { Route, IndexRoute };/*** 在这里导入所有页面组件*/从'./components/App'导入应用程序；从 './components/MainPage' 导入 MainPage；从 './components/SomePage' 导入 SomePage；从 './components/SomeOtherPage' 导入 SomeOtherPage；/*** 所有路线都在这里.* 添加新路由后不要忘记导入上面的组件.*/导出默认值 (<Route path="/" component={App}><IndexRoute 组件={MainPage}/><Route path="/some/where" component={SomePage}/><Route path="/some/otherpage" component={SomeOtherPage}/></路线>);

第 2 步 入口点(您进行 DOM 注入的地方)

//你可以在这里选择你的历史类型(例如 browserHistory)import { Router, hashHistory as history } from 'react-router';//你的 routes.js 文件从'./routes'导入路由；ReactDOM.render(<Router routes={routes} history={history}/>,document.getElementById('你的应用'));

步骤 3 App 组件 (props.children)

在您的 App 组件的渲染中，添加 {this.props.children}:

render() {返回 (<div><标题>这是我的网站！</标题><主要>{this.props.children}</main><页脚>您的版权信息</页脚>

);}

第 4 步 使用链接进行导航

在组件渲染函数返回 JSX 值的任何地方，使用 Link 组件:

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

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:

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>

这篇关于如何使用反应创建多页面应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！