1
我認爲我做錯了我的陣營路由器。我是React/Redux的初學者，所以任何幫助都非常感謝。這也可能是我如何配置webpack，但我的前端沒有顯示任何內容，但我根本沒有收到任何錯誤。我不確定是什麼問題，但我的服務器啓動，能夠填充模擬數據，並且webpack編譯，所以我認爲後端工作。反應路由器版本4不顯示任何
我對代碼的牆很抱歉，但我真的不知道我要去哪裏錯了，我是一個巨大的新手設置在此。這絕對是我寫過的最長的帖子，所以我感謝任何人看一看。
我的客戶/ src目錄/路線：
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
import HomePage from './components/home/HomePage';
import { Layout } from './components/Layout';
export const App =() => (
<Layout>
<Switch>
<Route exact path="/" component={HomePage} />
</Switch>
</Layout>
);
export default App;
客戶端/ src目錄/ Homepage.js：
import React from 'react';
import { Link } from 'react-router-dom';
class HomePage extends React.Component {
render() {
return (
<div id="main">
<h1>Hello</h1>
<p>World</p>
</div>
);
}
}
export default HomePage;
客戶端/ src目錄/ Layout.js：
import React from 'react';
import { Link } from 'react-router-dom';
export const Layout = props => (
<div className="app-container">
<header>
<Link to="/">
</Link>
</header>
<div className="app-content">{props.children}</div>
<footer>
</footer>
</div>
);
export default Layout;
客戶機/ SRC/App.jsx：
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from '../store/Store';
import { syncHistoryWithStore } from 'react-router-redux';
import routes from '../routes';
import { BrowserRouter as Router } from 'react-router-dom'
const store = configureStore();
export default class AppRoutes extends React.Component {
render() {
return (
<Provider store={store}>
<Router routes={routes} />
</Provider>
);
}
}
客戶/ SRC/index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import AppRoutes from './startup/App';
ReactDOM.render(
<Router>
<AppRoutes />
</Router>,
document.getElementById('main')
);
服務器/視圖/ index.ejs：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buddie!</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="main"><%- markup -%></div>
<script src="/js/bundle.js"></script>
</body>
</html>
服務器/ app.js：
/* eslint no-console: "off"*/
import path from 'path';
import { Server } from 'http';
import Express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter as Router } from 'react-router-dom';
import { App } from '../client/src/startup/App';
const app = new Express();
const server = new Server(app);
const routes = require('../server/routes/index');
// use ejs templates
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
// define the folder that will be used for static assets
app.use(Express.static(path.join(__dirname, 'static')));
app.use('/api/v1', routes)
// universal routing and rendering
app.get('*', (req, res) => {
let markup = '';
let status = 200;
if (process.env.UNIVERSAL) {
const context = {};
markup = renderToString(
<Router location={req.url} context={context}>
<App />
</Router>,
);
// context.url will contain the URL to redirect to if a <Redirect> was used
if (context.url) {
return res.redirect(302, context.url);
}
if (context.is404) {
status = 404;
}
}
return res.status(status).render('index', { markup });
});
// start the server
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, (err) => {
if (err) {
return console.error(err);
}
return console.info(
`
Server running on http://localhost:${port} [${env}]
Universal rendering: ${process.env.UNIVERSAL ? 'enabled' : 'disabled'}
`);
});
的WebPack配置：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: './client/src/index.js',
output: {
path: path.join(__dirname, 'server', 'static', 'js'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx', '.json']
},
devServer: {
historyApiFallback: true
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [ 'babel-loader' ],
}
]
},
plugins: [
new HtmlWebpackPlugin({
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
]
};
個的package.json腳本：
"scripts": {
"start": "npm run build:dev && babel-node server/app.js",
"start:dev": "export NODE_ENV=development && npm run build:dev && nodemon --exec babel-node -- src/server.js",
"start:universal": "export UNIVERSAL=true && npm run start",
"start:dev:universal": "export NODE_ENV=development && export UNIVERSAL=true && npm run start:dev",
"build": "NODE_ENV=production webpack -p",
"build:dev": "webpack -d",
"build:dev:watch": "webpack -d --watch"
},
"dependencies": {
"axios": "^0.16.2",
"babel-polyfill": "^6.23.0",
"babel-preset-node6": "^11.0.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"body-parser": "^1.17.2",
"chalk": "^1.1.3",
"classnames": "^2.2.5",
"concurrently": "^3.4.0",
"debug": "^2.6.8",
"ejs": "^2.5.6",
"express": "^4.15.3",
"immutable": "^3.8.1",
"jsx-loader": "^0.13.2",
"morgan": "^1.8.2",
"node-jsx": "^0.13.3",
"nodemon": "^1.11.0",
"normalizr": "^3.2.3",
"pg": "^6.2.4",
"react": "^15.6.1",
"react-addons-test-utils": "15.0.2",
"react-dom": "^15.6.1",
"react-hot-loader": "^3.0.0-beta.7",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8",
"react-scripts": "^1.0.7",
"react-slick": "^0.14.11",
"redux": "^3.7.0",
"redux-logger": "^3.0.6",
"redux-mock-store": "1.0.2",
"redux-thunk": "^2.2.0",
"sequelize": "^4.1.0",
"sequelize-cli": "^2.7.0",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.4.5",
"yargs": "^8.0.2"
},
"proxy": "http://localhost:8000"
你可以嘗試'渲染（）在App {返回
當我回到家時，會回報@grandas，謝謝！ – seanscal
@Grandas我做到了，頁面顯示「測試」，所以我認爲這是一個路由器/前端問題，如果我沒有弄錯？ – seanscal