Tag: react router

当我刷新的时候，Webpack-dev-middleware会返回一个404: 我正在尝试使用react-redux-app来设置webpack-dev-middleware。如果我刷新了主页，我收到了200个状态码。但是，如果我刷新任何其他页面（'/login'），我会得到一个404错误。谷歌search后，我发现这在Github上： var express = require('express'); var app = express(); var webpack = require('webpack'); var path = require('path'); var compiler = webpack(require('./webpack.config.js')); app.use(require('webpack-dev-middleware')(compiler, { noInfo: true, publicPath: '/' })); app.use('*', function (req, res, next) { var filename = path.join(compiler.outputPath,'index.html'); compiler.outputFileSystem.readFile(filename, function(err, result){ if (err) { return next(err); } res.set('content-type','text/html'); res.send(result); res.end(); }); […]

从react-scripts生成响应构build的问题: 我用react-scripts创build了react项目。完成一些function后，我试图build立这个项目。为此，我使用了npm run build命令。当我运行这个命令时，我可以生成生成文件夹。现在，我把生成文件夹移动到我的服务器，并试图执行。这是给我空白的白屏，并说没有findindex.js。我不确定，如何解决这个问题。你能帮我么。谢谢。

使用React Router 4进行服务器端渲染时，上下文为未定义: 我正在使用React Router 4在基本级别上实现服务器端渲染，以了解它是如何工作的。不过，我遇到了一些问题，React Router提供的文档并不清楚如何解决它们： 1）/服务器/路由中的我的上下文variables是未定义的。在前面的教程中我看到React Router用来使用createServerRenderContext（）; 但是在他们的文档中没有提到，所以我假设他们摆脱了它。我认为StaticRouter应该为你创build你的上下文吗？我如何定义我的上下文？ 2）我的htmlvariables呈现StaticRouter作为一个string在控制台显示这两个错误： Warning: React.createElement: type is invalid — expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Uncaught Error: Element type is invalid: expected a string […]

推（）位置，更改地址栏中的URL，但它不呈现组件: 我使用express作为nodeJs Web应用程序服务器，并使用react-redux-router push新位置push送到浏览器。将地址栏中的地址从localhost:3000/admin更改为localhost:3000 ，它会保持在同一页面上。我使用dispatch(push('/'))来执行作业。 logging器： [更新] 我使用这种解决scheme，但它并没有为我工作

在popup / webview中打开第三方url的最佳方法是使用反应js来跟踪相同的url: 伙计们，需要围绕Reactjs提出一些想法和想法。议程是在popup窗口或iframe中启动URL，并在popup窗口中向前移动时跟踪URL。我已经实现了React Poput，但无法跟踪窗口URL。 popup中的url应该是第三方应用程序。码： <Popout url='/hiddenFormSubmit' ref={popoutRef => this.popoutRef = popoutRef} containerId='hiddenContainer' options={{height:'650px'}} title='Window title' onClosing={this.popoutClosed}> </Popout> function： constructor(props){ super(props); this.state = { isPoppedOut: false }; popout() { console.log(" Popout URL::"); this.setState({isPoppedOut: true }); } popoutClosed() { this.setState({isPoppedOut: false}); } 我的隐藏表单组件在popup窗口中打开 import React, { Component } from 'react'; import classnames from 'classnames'; export […]

Uncaught TypeError在ES6中使用React Router呈现<Router>：type.toUpperCase不是函数: 我最近升级到了React v。0.14.0，ReactDOM v。0.14.0和React Router v。1.0.0-rc3，我正在努力处理以下错误。我已经阅读并尝试了这个和这篇文章的解决scheme，但我不能让它为我的代码，它使用ES6工作。调用ReactDOM.render方法时，发生在我的客户端app.js的错误。 import React from 'react'; import ReactDOM from 'react-dom'; import Router from 'react-router'; import routes from './routes'; import createBrowserHistory from 'history/lib/createBrowserHistory'; let app = document.getElementById('app'); let history = createBrowserHistory(); ReactDOM.render(<Router routes={routes} history={history} />, app); 这是从我的routes.js 。 import React from 'react'; import {Route, IndexRoute} from 'react-router'; import App from './components/App'; […]

使用Express设置React路由器: 关于使用Express设置React，我有几个问题。首先，我为Express和React-Router使用了相同的路由path。我认为这些应该是匹配的。但是，当我导航到一个页面，api / blogPosts时，它只显示了我从MongoDB中获取的JSON格式的数据。也就是说，Express路线将覆盖React视图。我知道我可以在React-Router中修改路由path（例如，前面没有'api'），以便有不同的路由。然后它会按预期显示React视图，同时仍然进行api调用。但是，我认为路线路线应该是匹配的。我应该如何正确处理这个问题？其次，我用express.Router（），我不知道这是必要的。什么时候应该使用express.Router（），什么时候应该使用app.get，app.post等第三，当人们讨论客户端路由时，他们正在讨论诸如React Router之类的东西吗？当人们讨论服务器端路由时，他们只是指像apiRouter调用那样对数据库进行api调用？ routes.js <Route component={App}> <Route path='/' component={Home} /> <Route path='/api/blogPosts/create' component={Create} /> <Route path='/api/blogPosts/:blogPostId' component={BlogPost} /> </Route> server.js var apiRouter = express.Router(); apiRouter.route('/blogPosts') .post(function(req, res) { var blogPost = new BlogPost(); blogPost.postbody = req.body.postbody; blogPost.save(function(err) { if (err) { return […]

服务器端未定义的renderProps / React / React-Router + Node / Express.js的同构渲染: 我试图得到服务器端/同构渲染工作的反应应用程序与反应路由器一致。我的route.js ： import React from 'react'; import { Route } from 'react-router'; import Test from './components/test'; export default ( <Route path="/test" component={ Test }> </Route> ); 我的server.js ： 'use strict'; require('babel-core/register') var path = require('path'); var express = require('express'); var logger = require('morgan'); var compression = require('compression'); var http = require('http'); var ReactDOM = […]

使用React-Router browserHistory，Wepback 2 historyApiFallback和Node: 我尝试使用React，Node，Wepback 2在本地运行我的React应用程序。每当我遇到不是/我得到404的路由时，我的目标是能够运行我的节点服务器，让webpack-dev-服务器运行，使用browserHistory并返回我的webpack的historyApiFallback工作。目前的工作：如果我只运行webpack-dev-server而没有节点服务器，那么browserHistory工作正常，没有404s。如果我用hashHistory运行节点，它工作正常，没有404s。所以这就排除了我的路线不工作。这里是一些代码： server.js const express = require('express'); const expressGraphQL = require('express-graphql'); const schema = require('./schema'); const app = express(); app.use('/graphql', expressGraphQL({ schema, graphiql: true })); const webpackMiddleware = require('webpack-dev-middleware'); const webpack = require('webpack'); const webpackConfig = require('../webpack.config.js'); app.use(webpackMiddleware(webpack(webpackConfig))); app.listen(process.env.PORT || 5000, () => console.log('Listening')); webpack.config.js const webpack = require('webpack'); const […]

在服务器端使用Passport-jwt呈现Express / React应用程序: 我有一个使用react-router的通用NodeJS，Express，React / Redux应用程序。它从服务器端在应用程序的初始请求和客户端上对来自react-router的后续请求进行渲染。我的routes.js文件： <Route path="/" component={App}> <Route path="/main" component={Main}/> <Route path="/login" component={Login}/> </Route> 我有一个通配符高速路由匹配这个反应路线，并发送组件标记回模板： import routes from '../routes'; app.get('*', (req, res) => { match( { routes, location: req.url }, (err, redirectLocation, renderProps) => { let markup; if (renderProps) { markup = renderToString( <Provider store={store}> <RouterContext {…renderProps}/> </Provider> ); } else { markup = […]