带有 Express 的 React Router v4 不在入口 jsx 外部呈现

Question

我正在努力将页面添加到我现有的应用程序，主页运行没问题，但任何其他页面都不会呈现，我得到了一个看起来像 Express "cannot GET /page1" 的错误.

我的 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;

快递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

看起来你在做一些事情

你在同一个端口上有 webpack dev server 和 express，这让我相信
你根本没有运行安装 webpack 开发服务器。

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

Here are the webpack dev server docs to get you started

另请注意，您无需在 React 组件中导入 render，从 Component 扩展即可处理。

Answer 2

我能够使用@Budhead2004 提供的类似方法解决此问题。万一其他人遇到这里 - 这就是我为了让它工作而改变的。我基本上必须提供应用程序呈现的反应入口点 (index.html)，在所有使用 Express 的路线上，就像在我的 app.js 文件中一样：

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

带有 Express 的 React Router v4 不在入口 jsx 外部呈现

React Router v4 with Express not rendering outside entry jsx

javascript

express

reactjs

react-router

react-router-dom