Articles of react 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/>组件 // […]