Articles of react router

响应路由与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 – – […]

如何运行redux-router的基本示例

我正在尝试使用redux-router ,我正在尝试运行基本示例 。 但简单, npm start 不起作用,下面的错误信息 node: bad option: -r 我是现代生态系统的初学者。 你能告诉我如何运行这个示例?

ReactRouter:警告:React.createElement:types不能为null,未定义

警告Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). 然后它抛出错误Error: Invariant Violation: Element type […]

React使用react-router和browserHistory所需的最小nodejs服务器设置

我目前的server.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")); let port = process.env.PORT || 3333; app.listen(port, () => console.log("Listening on port " + port) ); // … other routes for data fetching … // For browserHistory: https://github.com/reactjs/react-router/blob/1.0.x/docs/guides/basics/Histories.md app.get('*', (req, res) => […]

ReactJS服务器端重新加载(webpack-dev-server)

我正在尝试使用ReactJS构build我的第一个服务器端渲染。 我从这个Redux教程基于我的代码 运行npm start ( webpack && node server.js )时,应用程序运行正常。 我想用热重装来在dev环境下做一个应用程序的快速debugging。 所以我在npmconfiguration( webpack-dev-server –inline –hot )上添加了start选项。 请注意,我没有index.html文件,因为react-router正在select正确的JSX文件加载。 npm开始打开我的公共文件夹和显示文件,但没有启动我的应用程序。 通常我会点击一个index.html文件,但我没有。 我不明白是怎么回事,也不知道如何解决。 帮助赞赏。 的package.json: "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack –config webpack.config.prod.js -p", "start": "webpack-dev-server –inline –hot", "dev": "webpack && node server.js" }, webpack.config.js: module.exports = { entry: './client.js', output: […]