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

Question

我使用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;

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

Answer 1

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

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

1. 使用Route,IndexRoute组件创建一个包含路由的文件

2. 注入路由器(带'r'!)组件作为应用程序的顶级组件,传递routes文件中定义的路由和历史记录类型(hashHistory,browserHistory)

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

第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步 App组件(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>
  );
}

步骤4 使用链接进行导航

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

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

Answer 2

这是一个广泛的问题,您可以通过多种方式实现这一目标.根据我的经验,我看到很多单页应用程序都有一个入口点文件,如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,
);

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

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

Answer 3

对于Web应用程序，我建议您阅读以下两个示例：

• 您可以按照此实现
• 阅读react-router文档以了解所有用于React的路由器流程

恢复执行：

1-添加react-router-dom：

纱

yarn add react-router-dom

或NPM

npm install react-router-dom

2-使用以下命令更新index.js文件：

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

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
  ), document.getElementById('root')
);

3-创建一个Main组件并在其中调用页面（您还应该已经创建了页面组件）：

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>
      <Route exact path='/' component={Home}></Route>
      <Route exact path='/signup' component={Signup}></Route>
    </Switch>
  );
}

export default Main;

4-在App.js文件中添加主要组件：

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

5-将链接添加到您网页的某处

<Link to="/signup">
  <button variant="outlined">
    Sign up
  </button>
</Link>

Answer 4

继@lucas-andrade上面的答案之后：对于react-router版本> = 6，Switch不再存在（请参阅https://github.com/remix-run/react-router/issues/8439）。步骤3的内容变为：

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

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

const Main = () => {
  return (
    <Routes>
      <Route path='/' element={Home}></Route>
      <Route path='/signup' element={Signup}></Route>
    </Routes>
  );
}

export default Main;