javascript - 如何使用 React 创建多页面应用程序

Question

我使用 React js 创建了一个单页 Web 应用程序。我使用 webpack 创建所有组件的 bundle 。但现在我想创建许多其他页面。大多数页面都与API调用相关。即在 index.html 中，我显示了来自 API 的内容。我想在另一个页面中插入内容，解析来自 API 的数据。 Webpack 将 React 的所有内容压缩在一个文件中，该文件是 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;

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

Answer 1

前言

此答案使用 dynamic routing react-router 中采用的方法v4+。 Other answers可以引用之前使用的“静态路由”方法，该方法已abandoned通过react-router .

解决方案

react-router 是一个很好的解决方案。您将页面创建为组件，路由器根据当前 URL 交换页面。换句话说，它会动态地用新页面替换原始页面，而不是向服务器请求新页面。

对于网络应用程序，我建议您首先阅读以下两件事:

• Full Tutorial
• react-router docs ;它将帮助您更好地了解路由器的工作原理。

一般方法摘要:

1 - 添加 react-router-dom到您的项目:

yarn

yarn add react-router-dom

或NPM

npm install react-router-dom

2 - 更新您的 index.js文件类似于:

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render((
  <BrowserRouter>
    <App /> {/* The various pages will be displayed by the `Main` component. */}
  </BrowserRouter>
  ), document.getElementById('root')
);

3 - 创建 Main组件将根据当前 URL 显示您的页面:

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Home from '../pages/Home';
import Signup from '../pages/Signup';

const Main = () => {
  return (
    <Switch> {/* The Switch decides which component to show based on the current URL.*/}
      <Route exact path='/' component={Home}></Route>
      <Route exact path='/signup' component={Signup}></Route>
    </Switch>
  );
}

export default Main;

4 - 添加 Main App.js 内部的组件文件:

function App() {
  return (
    <div className="App">
      <Navbar />
      <Main />
    </div>
  );
}

5 - 添加 Link转到您的页面。

(您必须使用 Link 中的 react-router-dom 而不是简单的旧 <a> 才能使路由器正常工作。)

import { Link } from "react-router-dom";
...
<Link to="/signup">
  <button variant="outlined">
    Sign up
  </button>
</Link>