Tag: react router

在通用应用程序中呈现reactjs组件之前如何获取localStorage？

我将“一些”用户的会话数据存储在客户端的localStorage ，我需要在服务器呈现之后以及reactjs应用程序加载之前获取这些数据，以便检查用户会话是否有效。 如果用户会话有效，则使用用户数据更新Reduce存储; 否则，我保持原样。 我正在使用react-router的onEnter挂钩来检查用户的会话是否有效。 问题是我正在请求保存在服务器端的localStorage （我知道不可用）的数据。 因此，我需要一种方法来检查服务器渲染后的localStorage ，并准备好onEnter钩子。 我也想知道在服务器端是否有办法请求客户端的localStorage ？

将variables从react-router传递给子组件

如何从服务器端的react-router传递variables到子组件。 我想通过一些variables传递给由我的组件通过RoutingContext呈现 import { renderToString } from 'react-dom/server' import { match, RouterContext } from 'react-router' import routes from './routes' serve((req, res) => { match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { if (error) { res.status(500).send(error.message) } else if (redirectLocation) { res.redirect(302, redirectLocation.pathname + redirectLocation.search) } else if (renderProps) { res.status(200).send(renderToString(<RouterContext {…renderProps} />)) } […]

React路由器渲染空的div

app div是空的。 里面唯一的东西是一个noscript标签。 var React = require('react'); var ReactDOM = require('react-dom'); var reactRouter = require('react-router'); var Router = reactRouter.Router; var DefaultRoute = reactRouter.DefaultRoute; var Route = reactRouter.Route; var RouteHandler = reactRouter.RouteHandler; var Link = reactRouter.Link; var LoginHandler = require('./components/LoginHandler.jsx'); var AppComponent = React.createClass({ render: function() { return( <nav> <Link to="/">Home</Link> <Link to="login">Login</Link> <RouteHandler/> </nav> ) […]

BrowserHistory在Node / Express中使用API

我正在尝试为使用react-router的React应用程序实现BrowserHistory。 基于文档 ，我在我的index.js ： let express = require('express'); let harp = require('harp'); let path = require('path'); let app = express(); app.use(express.static(__dirname + "/dist")); app.use(harp.mount(__dirname + "/dist")); // BrowserHistory code app.get('*', function (request, response){ response.sendFile(path.resolve(__dirname, 'dist', 'index.html')); }); let port = process.env.PORT || 3333; app.listen(port, () => console.log("Listening on port " + port) ); // … […]

响应路由与URL参数不更新视图

我有一个反应观点/wiki/:artical 。 当我从一个不同的视angular去维基（例如从/到/wiki/some-artiacal ）我的观点更新，但是当我从一个维基到另一/wiki/some-artiacal （例如/wiki/some-artiacal到/wiki/some-other-artiacal ）页面不会与新的内容。 看来React认为它们是相同的观点，并且不会重新渲染页面。 如果我手动刷新浏览器，文章更新，但是当我点击<Link to='/wiki/some-other-artiacal'></Link>时，我想要刷新。 反应路由器文件： import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; // COMPONENTS import Header from './components/Header'; // VIEWS import HomePage from './views/HomePage'; import WikiPage from './views/WikiPage'; import ProblemTesterPage from './views/ProblemTesterPage'; import NoMatchPage from './views/NoMatchPage'; ReactDOM.render( <Router> <div […]

在NodeJS服务器（我正在使用react-router）的同构react-redux应用程序中设置存储的初始状态，

我正在尝试从NodeJS服务器设置我的redux商店的初始状态。 我不确定我错过了什么，以及如何使其工作。 这是我的server.js const express = require('express'); const path = require('path'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const webpackHotServerMiddleware = require('webpack-hot-server-middleware'); const config = require('./webpack/webpack.development.config.js'); const compiler = webpack(config); const app = express(); app.use(webpackHotMiddleware(compiler.compilers.find( compiler => compiler.name === 'client' ))); app.use(webpackHotServerMiddleware(compiler)); app.listen(3000); 这是我的webpack.development.config const path = require('path'); module.exports = […]

我如何处理服务器上的反应路由器可能的每条路线？

在反应路由器中的自述文件之后： var routes = ( <Route name="app" path="/" handler={App}> <Route name="inbox" handler={Inbox}/> <Route name="calendar" handler={Calendar}/> <DefaultRoute handler={Dashboard}/> </Route> ); Router.run(routes, function (Handler) { React.render(<Handler/>, document.body); }); 对节点和一个有信誉的前端js框架是非常新鲜的，请原谅noobish的问题.. 在服务器上处理路由最好如何？ 我的意思是，当某人登陆/calendar时会发生什么事情，我是否必须在快速路线中的客户端和服务器上容纳路线，或者是否有快递路线。 IE某人登陆/calendar ，应该表示为/的HTML并允许处理其余的？ 谢谢，约翰

使用Superagent服务器端获取连接ECONNREFUSED错误

我正在构build一个同构的React应用程序。 我正在使用Webpack捆绑我的JS。 我正在使用react-router进行路由。 当我点击“/search”路线时，要呈现的组件调用一个API（目前只是一个testingJSON文件）。 在客户端，superagent调用工作正常，并在渲染此路由时拉入数据。 当我尝试从服务器端渲染相同的路由时，出现此错误： Potentially unhandled rejection [2] Error: connect ECONNREFUSED at errnoException (net.js:901:11) at Object.afterConnect [as oncomplete] (net.js:892:19) 任何想法为什么发生这种情况？ 这是执行呼叫的代码： var request = require('superagent'); var Promise = require('Promise'); module.exports = { doCall: function(url, params) { return new Promise(function(resolve, reject) { request .get(url) .end(function(err, res) { if(res) { resolve(res); } else { reject(err); […]

React-router服务器端错误

我试图让我的客户端Web应用程序同构。 我得到这个模式： 客户端路由（使用react-router）和服务器端路由 在这里，我得到了什么。 server.js： var React = require('react'), express = require('express'), Router = require('react-router'), routes = require('./src/js/main'), path = require('path'), app = express(), port = 5555, bodyParser = require('body-parser'); // Make sure to include the JSX transpiler require("node-jsx").install(); // Include static assets. Not advised for production app.use(express.static(path.join(__dirname, 'dist'))); // Set view path app.set('views', path.join(__dirname, […]

嵌套的路由请求被解释为请求CSS文件

甚至不知道如何说这个问题。 基本上我有一个React应用程序，我使用React-Router进行路由处理，节点服务器发送每个请求的index.html文件，并处理静态资产，因为我正在使用React Router的HistoryLocationconfiguration。 logging每个请求到该服务器，我可以看到，去基地url发送3个请求，一切正常工作： GET / 200 3.795 ms – – GET /static/app.css 200 2.234 ms – – GET /build/bundle.js 200 0.608 ms – – 任何规则的浅层路线也是如此（例如/a ）。 但是，只要我尝试访问一个嵌套的路线（例如/a/b ），一切都打破。 更具体地说，在窗口中，我收到Uncaught SyntaxError: Unexpected token <一个语法错误，在我的节点服务器的日志中，我得到这些请求： GET /a/b 304 2.286 ms – – GET /a/static/app.css 304 1.061 ms – – GET /a/build/bundle.js 304 1.004 ms – – […]