反应路由器版本4不显示任何东西
我认为我在使用我的React路由器时出错了。 我是React / Redux的初学者，所以任何帮助真的很感激。 这也可能是我如何configurationwebpack，但我的前端是什么都没有显示，但我没有得到任何错误。 我不知道是什么问题，但我的服务器启动，能够填充模拟数据，和webpack编译，所以我认为后端工程。
我很抱歉的代码墙，但我真的不知道我要去哪里错了，我是一个巨大的新手设置这个。 这绝对是我写过的最长的文章，所以我感谢任何人看看它。
我的客户端/ 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'} `); });
webpackconfiguration：
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"
在你的src/client/App.js文件中，我注意到你正在从react-router-redux导入syncHistoryWithStore。 我相当有信心RR4和旧版本的react-router-redux不兼容。 使用@next安装的新版本不包含syncHistoryWithStore。
这可能是你的问题。
刚刚注意到这个代码块中的东西
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; }
}
你正在为context分配一个空的对象，向你的<Router />传递一个空的上下文，然后检查context.url和context.is404 ，这两个对象每次检查都将undefined ！ 也许你的意思是context = {...context} ？ 真的不确定这是否会影响渲染（很确定它没有），但值得一提的是。
如果你没有将这个代码运行为通用的，那么它将永远不会更新标记，它将永远是空的，因此不会打印任何东西。
在你的代码中的一个小的更正：在index.ejs中
删除标记标记中的最后一个“ – ”应该是<％ – markup％>