反应路由器版本 4 没有显示任何内容 [英] react router version 4 not showing anything

查看：40
本文介绍了反应路由器版本 4 没有显示任何内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我认为我的 React 路由器有问题.我是 React/Redux 的初学者，因此非常感谢任何帮助.这也可能是我配置 webpack 的方式，但我的前端什么也没显示，但我根本没有收到任何错误.我不确定问题是什么，但我的服务器启动了，能够填充模拟数据，并且 webpack 编译，所以我认为后端工作.

我对代码墙感到非常抱歉，但我真的不知道我哪里出错了，我是一个巨大的新手来设置这个.这绝对是我写过的最长的帖子，所以我感谢任何人看它.

我的客户端/src/路由:

从 'react' 导入 React进口 {BrowserRouter 作为路由器，路线，关联来自'反应路由器-dom'从./components/home/HomePage"导入主页；从'./components/Layout'导入{布局}；export const App = () =>(<布局><开关><路由精确路径="/" component={HomePage}/></开关></布局>);导出默认应用程序；

client/src/Homepage.js:

从'react'导入React；从'react-router-dom'导入{链接}；class HomePage 扩展了 React.Component {使成为() {返回 (<div id="main"><h1>你好</h1><p>世界</p>

);}}导出默认主页；

客户端/src/Layout.js:

从'react'导入React；从'react-router-dom'导入{链接}；导出 const 布局 = 道具 =>(<div className="app-container"><标题><链接到="/"></链接></标题><div className="app-content">{props.children}</div><页脚></页脚>

);导出默认布局；

客户端/src/App.jsx:

从'react'导入React；从'react-redux'导入{提供者}；从 '../store/Store' 导入 configureStore;从'react-router-redux'导入{syncHistoryWithStore}；从../routes"导入路由；从react-router-dom"导入{ BrowserRouter 作为路由器}const store = configureStore();导出默认类 AppRoutes 扩展 React.Component {使成为() {返回 (<提供者商店={商店}><路由路由={路由}/></提供者>);}}

client/src/index.js:

从'react'导入React；从 'react-dom' 导入 ReactDOM；import { BrowserRouter as Router } from 'react-router-dom';从 './startup/App' 导入 AppRoutes；ReactDOM.render(<路由器><AppRoutes/></路由器>,document.getElementById('main'));

服务器/视图/index.ejs:

<头><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>好友！</title><link rel="stylesheet" href="/css/style.css"><身体><div id="main"><%-标记-%></div><script src="/js/bundle.js"></script></html>

服务器/app.js:

/* eslint 无控制台:关闭"*/从路径"导入路径；从http"导入{服务器}；从快递"导入快递；从反应"导入反应；import { renderToString } from 'react-dom/server';从'react-router-dom'导入{StaticRouter作为路由器}；从'../client/src/startup/App'导入{应用}；const app = new Express();const 服务器 = 新服务器(应用程序)；const routes = require('../server/routes/index');//使用 ejs 模板app.set('视图引擎', 'ejs');app.set('views', path.join(__dirname, 'views'));//定义将用于静态资产的文件夹app.use(Express.static(path.join(__dirname, 'static')));app.use('/api/v1', 路由)//通用路由和渲染app.get('*', (req, res) => {让标记 = '';让状态= 200;如果(process.env.UNIVERSAL){常量上下文 = {};标记 = renderToString(<路由器位置={req.url} context={context}><应用程序/></路由器>,);//context.url 将包含要重定向到的 URL，如果一个 <Redirect>被使用如果(context.url){返回 res.redirect(302, context.url);}如果(上下文.is404){状态 = 404;}}返回 res.status(status).render('index', { markup });});//启动服务器const port = process.env.PORT ||3000；const env = process.env.NODE_ENV ||'生产';server.listen(port, (err) => {如果(错误){返回 console.error(err);}返回控制台信息(`服务器运行在 http://localhost:${port} [${env}]通用渲染:${process.env.UNIVERSAL ?'启用':'禁用'}');});

webpack 配置:

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const webpack = require('webpack');模块.出口 = {条目:'./client/src/index.js',输出: {路径:path.join(__dirname, 'server', 'static', 'js'),文件名:'bundle.js'},解决: {扩展名:['.js', '.jsx', '.json']},开发服务器:{historyApiFallback: 真},模块: {规则: [{测试:/\.jsx?$/,排除:/node_modules/，使用:['babel-loader']，}]},插件: [新的 HtmlWebpackPlugin({注入:'身体'，文件名:'index.html'}),新的 webpack.optimize.OccurrenceOrderPlugin(),新的 webpack.HotModuleReplacementPlugin(),新的 webpack.NoEmitOnErrorsPlugin(),新的 webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('development')})]};

package.json 脚本:

 "脚本": {"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"},依赖关系":{"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","粉笔": "^1.1.3","classnames": "^2.2.5","同时": "^3.4.0","调试": "^2.6.8","ejs": "^2.5.6","快递": "^4.15.3","不可变": "^3.8.1","jsx-loader": "^0.13.2","摩根": "^1.8.2","node-jsx": "^0.13.3","nodemon": "^1.11.0","normalizr": "^3.2.3","pg": "^6.2.4",反应":^ 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","反应脚本": "^1.0.7","反应流畅": "^0.14.11","redux": "^3.7.0","redux-logger": "^3.0.6","redux-mock-store": "1.0.2","redux-thunk": "^2.2.0","续集": "^4.1.0","sequelize-cli": "^2.7.0","webpack": "^3.0.0","webpack-dev-server": "^2.4.5","yargs": "^8.0.2"},代理":http://localhost:8000"

解决方案

如果您没有将此代码作为通用代码运行，那么它将永远不会更新标记，并且它将始终为空，因此不会打印任何内容.

代码中的一个小更正:在 index.ejs 中

<块引用>

删除标记标签中的最后一个-"，它应该是 <%- markup %>

I think that I am doing something wrong with my React router. I am a beginner to React/Redux so any help is really appreciated. It could also be how I configured webpack, but my front end is showing nothing, but I am not getting any errors at all. I'm not sure what the problem is, but my server starts, is able to populate mock data, and webpack compiles, so I think the backend works.

I'm so sorry for the wall of code but I really have no idea where I'm going wrong and I am a huge newbie to setup on this. This is definitely the longest post I've ever written so I appreciate anyone taking a look at it.

My client/src/routes: 

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;

client/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;

client/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;

client/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>
    );
  }
}

client/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')
);

server/views/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>

server/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 config:

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:

  "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"

解决方案

If you are not running this code as universal, then it will never update the markup and it will always be empty hence will not print anything.

One small correction in your code: in index.ejs

remove last '-' in markup tag it should be <%- markup %>

这篇关于反应路由器版本 4 没有显示任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆