Tag: react router

ReactJS react-router RoutingContext: 我正在使用ReactJS与react-router模块构build同构应用程序，以便在服务器端进行路由。从其在服务器上使用react-router的指南： (req, res) => { match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { //… else if (renderProps) { res.status(200).send(renderToString(<RoutingContext {…renderProps} />)) } //… }) } 几乎没有关于这个RoutingContext的信息。所以对于我来说它的工作原理还不太清楚。它是从反应路由器（在其他路线顶部使用）的某种Router组件的替代？任何帮助理解将非常感激！

如何添加login身份validation和会话到ReactJS React路由器和Redux与MongoDB + NodeJS Express？: 我有一个MongoDB + NodeJS Express服务器，运行Webpack并能够向数据库注册一个用户凭证。我现在想在用户login时添加身份validation和会话。我正在查看Passport.js但似乎无法掌握如何将所有可以放在一起。最好的办法是什么？任何示例和指导将不胜感激。到目前为止，这些都是我设立的。对于服务器： var express = require('express'); var path = require('path'); var config = require('../webpack.config.js'); var webpack = require('webpack'); var webpackDevMiddleware = require('webpack-dev-middleware'); var webpackHotMiddleware = require('webpack-hot-middleware'); var bodyParser = require('body-parser'); var MongoClient = require('mongodb').MongoClient; var ObjectId = require('mongodb').ObjectID; var app = express(); var db; var compiler = webpack(config); […]

Uncaught TypeError：（0，_reactRouter.withRouter）在react-router 2.4.0中编程路由导航时不是函数: 我正在使用react-router 2.4.0并想以编程方式链接到另一个路由（我使用<Link>之前做了什么）。在这个SOpost里很好的解释了他们在2.4.x说你应该在withRouter使用装饰器模式，所以我使用下面的代码： import {withRouter} from 'react-router' // further imports omitted class CreateJobItemFormRaw extends React.Component { … } const CreateJobItemForm = withRouter(CreateJobItemFormRaw) export default CreateJobItemForm 然后在其他文件中，我使用 import CreateJobItemForm from './CreateJobItemForm' 但是，使用这种方法，我的应用程序不再渲染和控制台输出： CreateJobItemForm.js:76 Uncaught TypeError: (0 , _reactRouter.withRouter) is not a function 谁能帮我解决这个问题吗？

React Router v4中的indexLink: 菜鸟在这里。在React Router v4中有没有新的方法来使用indexLink？我正在更新一些版本3代码（我想我离开angular度避免所有这些弃用！）我把它带入一些descructuring： var {NavLink, IndexLink} = require('react-router-dom'); 并使用IndexLink保持它始终不醒目： <h2>Nav</h2> <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>blah blah blah</IndexLink> //Other navlinks working fine IndexLink是打破我的代码的唯一的东西，这是从我改变它的错误。 “警告：React.createElement：type是无效的 – 期望一个string（对于内置组件）或一个类/函数（对于复合组件），但得到：undefined。你可能忘了从你定义的文件中导出你的组件检查Nav的渲染方法“。一切都被导出，简单的应用程序完美工作，直到我添加IndexLink。现在传递出去。

用反应路由器表示状态404: 我有一个快递服务器，处理：1 API路由和呈现我的初始index.html包括bundle.js持有我的React / React-Router / Redux应用程序。就目前而言，我的网页上不可能有404，因为我有一个全部的东西： app.use(function (req, res) { return res.render('index') }) 为了让react-router的NoMatch工作，我需要发送一个404代码。我的路线如下： Express – /api/test/:x/:y React Router – :x/ ，： :x/:y 我基本上试图实现的是，如果用户曾经去过:x/:y/z/and/further那么返回一个404，除非他们去了/api/test/:x/:y 问题：我怎样才能匹配路线，不包括我的API路线，最好以可扩展的方式，返回适当的状态代码？对于如此简单的事情，在子域名上设置这个有很大的开销吗？那甚至会缓解这个问题呢？当应用程序增长时，我会遇到问题吗？

在react-router v4中使用React IndexRoute: 我正在使用在线教程学习React。所以这是使用React Router的一个基本例子： <Router history={browserHistory}> <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="/home" component={Home}/> <Route path="/about" component={About}/> <Route path="/contact" component={Contact}/> </Route> </Router> 与我的应用程序组件： class App extends React.Component { render() { return ( <div> <ul> <li><Link to="home">Home</Link></li> <li><Link to="about">About</Link></li> <li><Link to="contact">Contact</Link></li> </ul> {this.props.children} </div> ) } } export default App; 但是，我使用IndexRoute时遇到了问题，因为它没有显示任何内容，所以我在npm上searchreact-router-dom v4的模块，里面没有IndexRoute。相反，它使用这个： <Router> <div> <ul> <li><Link […]

服务器端渲染与反应，反应路由器，并表示: 我试图为我的反应应用程序设置服务器端渲染，我试图使用伟大的react-router模块来允许它处理非js的情况（一些爬虫，当用户closuresjs原因）。但是，我遇到了麻烦。我一直在使用伟大的响应在这里https://stackoverflow.com/a/28558545/3314701作为指导，但我得到了奇怪的错误抛给我。尝试使用react.renderToString()时，我得到一个持久的Syntax Error 。我是否设置了错误的服务器端渲染，丢失了明显的东西，还是其他的东西？我的设置：真正基本的快递服务器 require('babel/register'); var app = express(); // misc. express config… var Router = require('react-router'), routes = require('../jsx/app').routes, React = require('react'); app.use(function(req, res, next) { var router = Router.create({location: req.url, routes: routes}); router.run(function(Handler, state) { console.log(Handler); var html = React.renderToString(<Handler/>); return res.render('react_page', {html: html}); }); }); 顶级反应<App/>组件 // […]