反應路由器v4與Express不呈現外部條目jsx

我正在努力將頁面添加到我現有的應用程序，東西運行良好的主頁，但沒有其他頁面將呈現，我得到什麼看起來像一個快遞「不能GET/page1「錯誤。反應路由器v4與Express不呈現外部條目jsx

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

來源

2017-10-13 Kevin W

您是否使用直接導航到URL你的瀏覽器？ – palsrealm

您需要確保Express服務於相同的位置，而不管網址如何。 Express正在嘗試解析/ page1，並且它從不將它傳遞給React-Router，所以像app.use（'*'，（res，req）=> {//總是返回devServer}）; – Budhead2004

@ Budhead2004這基本上是發生了什麼，但不是總是返回devServer我需要返回index.html文件，反應呈現 –

我可以用@ Budhead2004提供的類似方法解決這個問題。如果有其他人遇到這裏 - 這是我改變了它的工作。我不得不基本上滿足了反應入口點（爲index.html）應用程序呈現到，就用快遞的所有路線，像這樣在我的app.js文件：

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

來源

2017-10-13 22:59:27

它看起來像你正在做幾件事情

你的WebPack d ev服務器&表示在相同的端口，這導致我相信
你根本沒有運行webpack開發服務器。

Express不會爲您的webpack提供服務，webpack將爲您的webpack提供服務。嘗試將devServer.port更改爲除3000之外的任何內容，運行webpack並從此處進行調試。

Here are the webpack dev server docs to get you started

另外，作爲一個側面說明，你並不需要在你的陣營組件導入render，從組件擴展將處理它。

來源

2017-10-13 15:50:00

我運行'webpack -d --watch'與服務器一起，這是什麼你指的是運行開發服務器？ –

反應路由器v4與Express不呈現外部條目jsx

回答

相關問題