Tag: react router
React路由器服务器端无法正常工作
我有我的应用程序代码在这里： https ： //github.com/WebTerminator/aldemar/commits/master 我试图让我的反应的应用程序在服务器端工作，在这个阶段，它的工作部分。 我遇到的问题是（山姆问题发生在本地） 如果我在浏览器中浏览它一切正常，当我刷新此URL https://aldemar-productions.herokuapp.com/projects/margam2我得到一个控制台错误，如： bundle.js：1未捕获的SyntaxError：意外的标记< 如果我刷新其他url，如“ https://aldemar-productions.herokuapp.com/projects ”或“ https://aldemar-productions.herokuapp.com/about ”，他们工作正常。 server.js import express from 'express'; import path from 'path'; import React from 'react'; import { renderToString } from 'react-dom/server'; import { match, RouterContext } from 'react-router'; import routes from './src/client/app/config/routes.jsx'; let port = process.env.PORT || 8080; let app = express(); app.use(express.static('src/client/')); […]
React路由器截取到Express服务器的API调用
我使用React Router和Passport.js来设置Facebooklogin。 我已经设置了快速路线和护照configuration，但是每次我在客户端点击<a href="/api/auth/facebook">链接时，都会向RR提出请求，因为我的快速应用程序线： app.get('/*', function(req, res) { res.sendFile(path.resolve(__dirname, '../client', 'build', 'index.html')) }); 当我调用服务器端路由时，它返回这个错误： Warning: [react-router] Location "/api/auth/facebook" did not match any routes 我怎样才能绕过反应路由器这一个特定的路线？ 我的user_routes.js文件如下所示： 'user strict'; var bodyparser = require('body-parser'); var User = require('../models/User.js'); module.exports = function loadUserRoutes(router, passport) { router.use(bodyparser.json()); router.get('/auth/facebook', passport.authenticate('facebook', { session: false, successRedirect: '/chat', failureRedirect: '/' })); router.get('/auth/facebook/callback', passport.authenticate('facebook', { […]
不变式违例：元素types无效：期望一个string（用于内置组件）或类/函数。 反应路由器v4
我对reactjs比较陌生，正在使用react-router v4testing基本的服务器端渲染，但是我无法越过这个错误，从几个小时以来一直在尝试。 我已经尝试了我在谷歌find的每一个解决scheme，但他们似乎没有工作。 这里是server.js代码： import Express from 'express'; import React from 'react'; import { renderToString } from 'react-dom/server'; import { StaticRouter } from 'react-router' import MyRoutes from './routes/routes.js'; … app.get('*', (req, res) => { let markup = `<!DOCTYPE html> <html lang="en"> <body> ${renderToString(<StaticRouter location={req.url} context={{}}><MyRoutes/></StaticRouter>)} </body> </html>`; res.write(markup); res.end(); }); 问题似乎与以下代码： ./routes/routes.js代码： import React from […]
无法读取反应数据表错误中未定义的属性“映射”
在地图function中得到错误。 generateRows: function() { var cols = this.props.cols, // [{key, label}] data = this.props.data; 获取数据错误（未定义值获取） return data.map(function(item) { // handle the column data within each row var cells = cols.map(function(colData) { // colData.key might be "firstName" return <td> {item[colData.key]} </td>; }); return <tr key={item.BlogId}> {cells} </tr>; }); },
react-router部署非静态
将基于react-router的webapp部署到在node.js服务器下运行的生产可以吗？ 除非首先加载index.html ，否则部署静态文件将阻止像server.com/about这样的链接工作。 人们可以通过使用HashRouter来解决这个问题，但是在这HashRouter看起来很老派。 index.js import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import App from './js/App'; import About from './js/About'; import registerServiceWorker from './registerServiceWorker'; import './index.css'; import { BrowserRouter as Router, Route } from 'react-router-dom'; ReactDOM.render( <Router> <App> <Route path='/about' component={About} /> </App> </Router> , document.getElementById('root')); registerServiceWorker();
如何使用NextJS和React Router呈现服务器端反应内容？
我需要从服务器端渲染我的React应用程序。 为此，我使用了next.js框架。 但是我面临着两个问题。 首先，我需要dynamic地提供我的应用程序。 这意味着我需要一个服务器端路由器根据当前的url显示我的反应组件。 然后，我需要在渲染我的组件之前加载一些dynamic数据。 所以我需要将这些数据从节点传递给我的反应组件。 这是我目前的情况： // In Node.js app.get("/",function(req,res){ return app.prepare() .then(() => handle(req, res)) .catch(ex => { console.error(ex.stack) process.exit(1) }) }) //In React.js import React from 'react' export default class Index extends React.Component{ render(){ return( <div> <p>Hello Server Side Rendered React App from Google Cloud Front</p> </div> ) } } 所以我该怎么做 […]
create-react-app与节点快速获取％PUBLIC_URL％
我正在尝试使用快递服务器创build反应应用程序。 设置服务器后，当我点击要求，我越来越 GET http://localhost:3333/%PUBLIC_URL%/favicon.ico 400 (Bad Request) 在错误预览它给我 URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico' at decodeURIComponent (<anonymous>) at decode_param (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:172:12) at Layer.match (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:123:27) at matchLayer (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:574:18) at next (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:220:15) at jsonParser (/home/owaishanif/code/flashcard-app/node_modules/body-parser/lib/types/json.js:103:7) at Layer.handle [as handle_request] (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:317:13) at /home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:335:12) 这是服务器代码 var express = require('express'); var bodyParser = require('body-parser'); var […]
ExpressJS + Webpack + react-router v4
我正试图build立自己的模板来创build反应应用程序，以便知道幕后发生了什么。 我被困在使用Webpack / Express / react-router v4的服务器渲染中。 只是不知道如何解决它。 我的express.js文件如下所示： const express = require('express'); const morgan = require('morgan'); const path = require('path'); const React = require('react'); const ReactDOMServer = require('react-dom/server'); const StaticRouter = require('react-router').StaticRouter; const App = require('./src/app'); const app = express(); // Views app.set('view engine', 'ejs'); app.set('views', path.resolve(__dirname, 'src', 'templates')) // Middlewares app.use(morgan(':method :url :status […]
重新加载页面时，用户的login状态在前端丢失
我使用express + mongodb + redis + mongoose作为我的后端提供api。 而且，使用react + react-router + redux作为我的前端。 身份validation是基于sessionId + cookie 。 对于前端，我使用react-router和onEnter挂钩进行身份validation控制。 当用户成功login时，我将后端的用户信息保存到redux存储中。 喜欢这个： const auth = { username: 'novaline', isLogin: true}; 一切都很好。 问题是： 当用户重新加载页面时，在REDX存储中caching的数据被擦除。 是的，我知道，REDEX商店有它的生命周期。 但是，当用户login时，如果他们重新加载页面，由于authentication数据从REDEX存储区中删除，前端将丢失用户信息。 他们的用户名将是未定义的，因为onEnter挂钩，他们将被redirect到login页面。 但是对于后端来说， session还是在redis 。 我知道jwt可以解决这个问题。 但对于我的情况。 用户重新加载页面时如何保持用户的login状态？ PS我设置cookie httpOnly和Max-Age 。 所以客户端无法获取或设置cookie 。 __update：__ 我尝试将用户信息保存到localStorage。 所以，当用户login时，重新加载页面，我检查localStorage中是否有用户信息，如果是true，我将重置auth数据，如下所示： const auth = {username: localStorage.getItem('username'), isLogin: true}; 所以，我可以使用它来实现自动login和redirect到home […]
React / Express没有正确的路由链接
所以，我有一个反应的项目，除了快递工作正常。 我很难findMERN堆栈教程正确路由与快速。 我发现了一些SOpost，但没有在我的项目中工作。 当我将某人连接到某个反应路线时，我得到“未find”。 我一直在这个公平的周围乱搞，因此被评论的静态中间件。 Project Structurte Root package.json Server Routes index.js app.js package.json Client Build Public Src App.js var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var compression = require('compression') var session = require('express-session'); var index = require('./routes/index'); […]
