Question

我正在努力将页面添加到我现有的应用程序中，主页上的内容正常运行，但任何其他页面都不会呈现，我看起来像Express“无法GET / page1”错误。

My Express服务器同时运行，我使用webpack代理api，如下所示：

devServer: {
    host: 'localhost',
    port: 3000,
    proxy: {
      '^/api/*': {
        target: 'http://localhost:3000/',
        secure: false
      }
    }
  }

以下是我的应用程序其余部分的设置示例：

index.jsx

import React from 'react';
import {render} from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

import Home from './pages/Home.jsx';
import Page1 from './pages/Page1.jsx';

render((
  <Router>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/page1" component={Page1}/>
    </Switch>
  </Router>
  ),
  document.getElementById('app')
);

Home.jsx

import React from 'react';
import {render} from 'react-dom';

class Home extends React.Component {
  render () {
    return (
      <h1>Home</h1>
    )
  }
}

export default Home;

Page1.jsx

import React from 'react';
import {render} from 'react-dom';

class Page1 extends React.Component {
  render () {
    return (
      <div>
        <h1>Page1</h1>
      </div>
    );
  }
}

export default Page1;

Express App.js

var express = require('express');
var http = require('http');
var bodyParser = require('body-parser');
var app = express();
var users = require('./routes/users');
var config = require('./config.js');

app.use(express.static(__dirname + '/src'));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use('/users', users);

http.createServer(app).listen(3000);

module.exports = app;

Answer 1

我能够用@ Budhead2004提供的类似方法解决这个问题。万一其他人遇到这里 - 这就是我改变它以使其工作。我必须基本上在Express的所有路由上提供应用呈现的react入口点（index.html），就像在我的app.js文件中一样：

app.use('*', function(req, res) {
  res.sendFile(path.resolve(__dirname, 'src', 'index.html'));
});

Answer 2

看起来你正在做一些事情

你有webpack dev服务器＆amp;在相同的端口上表达，这让我相信
您根本没有运行webpack dev服务器。

Express不会为你的webpack提供服务，webpack会为你的webpack提供服务。尝试将devServer.port更改为3000以外的任何内容，运行webpack，然后从那里进行调试。

Here are the webpack dev server docs to get you started

另外作为附注，您不需要在React组件中导入render，从Component扩展将处理它。

React Router v4，Express不在条目jsx之外呈现

2 个答案: