Tag: react router

区分首页加载和路由器<Link />？

我有一个渲染覆盖模式的路线。 我希望它animation，如果我从UI导航，并从地址栏导航或刷新后加载为静态。 我使用nodejs和react + react-router。 我想过使用我的通用redux设置来匹配这个问题的状态prop，但也许有一个更优雅的解决scheme 谢谢！

React-Router无法导入组件内的组件

我在理解如何使用react-router来构build路由和页面时遇到了一个问题，我学习了反应的原理，并且正在处理当前位于24ways的post。 我面临的问题是导入组件的能力。 例如，我有我的路由器设置如此： // Router export const routes = { path: '', component: appComponent, childRoutes: [ { path: '/', components: {nav: navbarComponent, content: indexComponent} }, { path: '/join', component: {nav: navbarComponent, content: joinComponent} } ] }; // appComponent import React from 'react'; export default class appComponent extends React.Component { render() { const { nav, content […]

如何使用react-router 2来设置服务器端渲染

我想移植我的应用程序，从1.0反应路由器2.0。 我正在尝试做快递服务器端渲染。 server.js代码（1.0）（工作） var routes = require('./public/js/app.node.js'); app.get('*', function(req, res, next) { var location = new Location(req.path, req.query); try { Router.run(routes(), location, function(e, i, t) { var str = React.renderToString( React.createElement(Router, i)); }); } catch(e) { return next(); } }); server.js代码（2.0）（不工作） var routes = require('./public/js/app.node.js'); app.get('*', function(req, res, next) { var location = new Location(req.path, […]

react-router-redux：将路由参数映射到状态

有没有办法自动映射路由参数到状态键？ 例如：我想将state.auth.resetEmail和state.auth.resetToken初始化为路由参数params.resetEmail params.resetToken只要这些路由参数可用。 也许我以错误的方式接近这个？

使用路由器和浏览器时，React.js包的大小太大

这是我的Routes.jsx文件 var React = require('react'); var Router = require('react-router/lib/router') var useRouterHistory = require('react-router/lib/useRouterHistory'); var hashHistory = require('history/lib/createHashHistory'); var IndexRoute = require('react-router/lib/IndexRoute'); var Route = require('react-router/lib/Route'); var History = useRouterHistory(hashHistory)({ queryKey: false }); var Base = require('./components/Pages/Base.jsx'); var HomePage = require('./components/Pages/HomePage.jsx'); var Historial = require('./components/Pages/Historial.jsx'); var NuevoPedido = require('./components/Pages/NuevoPedido.jsx'); var Routes = ( <Router history={History}> <Route […]

react-router RouterContext部署错误

我努力使我的通用Reactnetworking应用程序在服务器上运行（OpenShift）。 我之前开发了其他通用应用程序，但从未遇到过这个错误： 基本上，当在服务器上运行时， RouterContext传递给ReactDOM。 renderToString （）不被识别为有效的React元素。 在本地主机上深入挖掘renderToString实现，我有这个值为RouterContext上下文types： 但在服务器上，我得到了这个： 这就是为什么React在创buildRouterContext元素时引发不变违规的原因。

如何在koa的反应路由器中使用浏览器历史logging

在快递中，我们可以使用以下代码来处理请求。 当请求不是由路由器处理时，服务器端将发送index.html。 app.get('*', function (request, response){ response.sendFile(path.resolve(__dirname, '../public', 'index.html')) }) 但是在koa中，以下代码不起作用。 当请求不被koa-router处理时，它将返回404而不是index.html。 var send = require('koa-send') var serve = require('koa-static') var router = require('koa-router') var koa = require('koa') var app = koa(); app.use(serve(__dirname+'/../public')); app.use(function *(){ yield send(this, path.join(__dirname, '/../public/','index.html' )); }) app.use(router.routes()) 以下代码也不起作用 router .get('*', function* () { yield send(this, __dirname +'/../public/index.html') })

“不能读取未定义的属性'数据'错误unit testing与axios和moxios redux行动

我正在尝试使用axios进行api调用的asynchronous还原操作。 我在moxios的帮助下testing它，并且它在几天前工作，但由于某种原因，今天当我创build另一个asynchronous操作时，它刚刚打破。 这是我的unit testing代码： 1 import configureMockStore from 'redux-mock-store'; 2 import thunk from 'redux-thunk'; 3 import moxios from 'moxios'; 4 5 import * as types from '../../../../client/auth/actions/action_types'; 6 import loginAuth from '../../../../client/auth/actions/login_action'; 7 8 require('dotenv').config(); 9 const expect = require('chai').expect; 10 11 const mockStore = configureMockStore([thunk]); 12 13 const user = { 14 email: 'john@loginActionTest.com', […]

从express中redirect到react-router

我将身份validation添加到我的应用程序，它使用react-router.And反应路由器正在处理我的login/注册page.Also我使用护照进行身份validation和通行证身份validation工作正常。 但是，当我的护照有一个成功的身份validation，并且我正在redirect到仪表板页面时，我遇到了一个问题。 server.js： – app.get('/auth/google/callback', passport.authenticate('google', { successRedirect: '/dashboard', failureRedirect: '/', })); app.get('*',(req, res) => { if (process.env.NODE_ENV === 'development') { webpackIsomorphicTools.refresh(); } const memoryHistory = createHistory(req.originalUrl); const store=configureStore(memoryHistory); const history = syncHistoryWithStore(memoryHistory, store); function hydrateOnClient() { res.send(`<!doctype html>${ReactDOM.renderToString(<Default assets={webpackIsomorphicTools.assets()} store={store} />)}`); } match({ history, routes: routes(store), location: req.originalUrl }, (error, redirectLocation, renderProps) => { […]

在同构反应应用程序中，是否有最简洁的方式在客户端和服务器端获取当前的URL？

我正在开发一个基于这个 React Redux样板的应用程序。 在一个组件中，为了生成社交媒体的可共享URL，我需要获取当前组件的当前URL。 使用React Router，可以从dynamic生成的URL访问组件。 在客户端，我不会有任何问题通过JavaScript document对象，但问题在于服务器端。 我想在Redux存储中提供保存在此config.js文件中的Node.js环境数据，其中保存了主机名 // Node.js environment file config.js require('babel-polyfill'); const environment = { development: { isProduction: false }, production: { isProduction: true } }[process.env.NODE_ENV || 'development']; module.exports = Object.assign({ host: process.env.HOST || 'localhost', port: process.env.PORT, apiHost: process.env.APIHOST || 'localhost', apiPort: process.env.APIPORT }, environment); 并将React Router的location对象设置为组件中的道具，获取path名并完全构造URL。 我所做的就是创build一个初始状态的简单reducer，以保持Node.jsconfiguration环境数据，并且只需要将默认操作包含在与其他应用程序reducer的combineReducers函数中。 const initialState = […]