Tag: react router

React Router / Express – 刷新dynamicURL参数: 当通过链接导航到“/ Article / 1 /”时，My React路由器工作正常，但是当我刷新浏览器时，它不再检测到我的文章组件。 Root.js import React from 'react'; import { BrowserRouter as Router, Route, Link, browserHistory } from 'react-router-dom'; import Home from '../page/Home/Index'; import Article from '../page/Article/Index'; const Root = () => { return ( <Router history={browserHistory}> <div> <ul> <li><Link to={'/'}>Home</Link></li> <li><Link to={'/About'}>About</Link></li> </ul> <hr /> <Route exact path={'/'} component={Home} /> <Route […]

安装npm依赖性问题…好吧，几乎任何东西: 突然间，这发生了： $ npm install history npm ERR! Linux 3.13.0-76-generic npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "history" npm ERR! node v4.4.0 npm ERR! npm v2.14.20 npm ERR! code EPEERINVALID npm ERR! peerinvalid The package history@1.13.1 does not satisfy its siblings' peerDependencies requirements! npm ERR! peerinvalid Peer react-router@1.0.3 wants history@^1.17.0 …当我尝试安装时，几乎所有的东西。我试图安装react-bootstrap ，得到这个错误，并试图升级历史logging。我不确定在这里做什么。我试过npm i -S […]

在为React-Router提供静态文件时，使用Express JS将数据发送到路由: 我想要实现的：使用Express JS制作的可以获取数据的路由（例如： https ： //tmi.twitch.tv/group/user/instak/chatters ），通过React Router发送到我的正确路由路由并使React等待，直到数据被提取，这样我就可以使用这些数据来处理客户端。我试过了 server.js 'use strict'; const express = require('express'); const app = express(); const path = require('path'); app.use(express.static(path.resolve(__dirname, '..', 'instakbot-client'))); // Always return the main index.html, so react-router render the route in the client app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, '..', 'instakbot-client', 'index.html')); }); app.get('/home', (req, res) => { […]

匹配API和同构路线: 我有一个同构的应用程序快速运行： app.get('*', (req, res) => { match( { routes, location: req.url }, (error, redirectLocation, renderProps) => { … } 目前我在通配符上进行匹配，因为这是我见过的大多数样板和教程中所采用的方法。现在这个问题是我需要能够匹配特定的路线，如/auth和/api需要以不同的方式处理同构的应用程序的路线。即/auth路由需要authentication用户。我需要一种方式来指定这些路线，但仍然保持通配符匹配的路线使用我的同构的应用程序。我已经考虑过，不是使用通配符匹配器，而是可以将同构应用程序的所有路由收集到一个数组中，并用它来表示： const isoRoutes = ['/home', '/about']; app.get([isoRoutes], (req, res)) 我不确定是否有更好的方法来达到这个目的？

在Express服务器上使用react-router: 我有一个简单的Express服务器正在服务的React应用程序。 React应用程序正在被webpack放到我的根目录（ server.js文件所在的位置）的一个名为dist目录中。 dist文件夹包括index.html入口点， main.min.js JavaScript包以及所有其他静态资源（css，图像等）。如果我访问该站点的根目录localhost:3000/例如， index.html得到服务，它加载JS捆绑并发现所有其他资产罚款。该应用程序，使用react-router ，通过button点击和一个链接，使我到localhost:3000/feature正常工作正常导航。但是，如果手动进入地址栏并键入localhost:3000/feature ，则服务器会按照预期提供index.html ，但也会用index.html代替main.min.js 这是因为快速服务器中的通配符路由被映射为返回index.html 。这是我在一些文章中看到的，但是我不确定这个案子是否被考虑过。以下是相关服务器代码的一部分： app.use(express.static(path.join(__dirname))); app.get('*', function response(req, res) { res.sendFile(path.join(__dirname, 'dist', 'index.html')); }); 这是什么定义服务器路由。有没有更好的方法来做到这一点，将允许手动地址更改？这是我的文件结构，如果有帮助： |-root |-server.js |-webpack.config.js |-dist/ |-main.min.js |-index.html |-a2cea76fae187add3c974dcacf446eab.jpg |-…etc index.html内容： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> […]

服务器端反应路由器不会呈现我的路线: 我与版本1.0.0-rc1和我的匹配函数将不会正确呈现我的路线。这是我的服务器 import express from 'express'; import React from 'react'; import createLocation from 'history/lib/createLocation' import Router, { match, RoutingContext } from 'react-router'; import createRoutes from './create-routes'; const app = express(); const routes = createRoutes(); app.use((req, res) => { let location = createLocation(req.url); match({ routes, location }, (error, redirectLocation, renderProps) => { if (redirectLocation) res.status(301).redirect(redirectLocation.pathname + […]

服务器渲染react-router v4 passthrough如果404: 在react-router v3中，我们可以知道服务器端渲染何时与当前url不匹配。这允许我将请求传递给我的express.static中间件，而不是发送呈现的应用程序。在反应路由器v4中，我们必须使用 const htmlData = renderToString( <StaticRouter location={req.url} context={context} > <App/> </StaticRouter> ); 以便在服务器端渲染。但是，它会自动将所有内容redirect到/ 。为什么这种行为甚至存在？难道我们不能像我们所期望的那样错误地失败吗？我怎么能知道没有匹配的东西，我可以打电话给next() ，让另一个快递的路线做这个工作？这是我想要使用的整个function： app.get('*', (req, res, next) => { const context = {}; const htmlData = renderToString( <StaticRouter location={req.url} context={context} > <App/> </StaticRouter> ); console.log(JSON.stringify(context, null, 4)); // empty object if (context.url) { // <———————— […]

我应该使用快递，客户端反应路由器还是服务器端反应路由器？: 我有一个简单的应用程序，显示用户的评论列表。当用户点击时，应用程序应该去/users/<id>并显示一个新的页面与用户的细节，将从MongoDB查询。我很难理解这个逻辑应该在哪里。我看到了在客户端使用反应路由器的例子，如： render(( <Router> <Route path="/" component={App}> <Route path="/user/:userId" component={User}/> </Route> </Router> ), document.body) 而且在服务器端也是这样的： <Route name="root" path="/" handler={require('./handlers/Root')}> 而且还使用快速路由： app.get('/', function home (req, res, next) { res.render('layout', { reactHtml: React.renderToString(<App />) }); }); app.get('/user', function home (req, res, next) { res.render('layout', { reactHtml: React.renderToString(<User />) }); }); 哪一条路要走？有什么区别？

反应路由器 – BrowserHistory.Push VS. ContextTypes: 我正在完成一个高级的react / redux教程，并在教程中使用browserHistory.push链接到一个路线，而不是用于创build一个名为contextTypes的静态类variables的前一个方法，并设置它等于类似React.PropTypes.blah等等等等。那和使用browserHistory.push有什么区别？与设置上下文types相反，browserHistory.push似乎更容易作为程序重新路由。谢谢！

React-Router Router.HistoryLocation刷新页面: 我正在使用React-Express-Node应用程序并专注于SPA。我正在使用react-router。我的server.js文件看起来像这样（只有路由部分）： app.use(function(req, res, next) { Router.run(routes,function(Handler, state) { var ele = React.createElement(Handler); res.render(path.join(__dirname + '/public/index'), {html: html}); }); next(); }); 路线文件有这个代码（粘贴主要部分）： module.exports = ( <Route name="app" path="/" handler={Main}> <Route name="about" path="about" handler={About}/> <Route name="about/id" path="about/:id" handler={About}/> <DefaultRoute name="default" handler={Home} /> </Route> ); 和client.js看起来像这样： Router.run(routes, function(Root,state){ React.render(<Root />,document.getElementById('app')); }); 这个设置工作正常没有任何问题。现在，我想使用历史API推送状态，以便我可以有更好的url和摆脱＃。为了做到这一点，我添加了Router.HistoryLocation作为client.js中的第二个参数，它工作，它删除＃和干净的url。但是，我的页面刷新，我不想要的。我已经search了这一切，并find了一些解决scheme，但他们要么使用Flux或自定义路由器。 […]