Articles of react router

在服务器上呈现react-router v4和redux时,浏览器历史logging需要DOM错误

我试图为我的应用程序服务器呈现内容,使用react-router v4,redux和express,但我得到Browser history needs a DOM在terminalBrowser history needs a DOM错误。 我也使用react-router-config来保持我的路由更有条理。 看到一个解决scheme,build议应该在服务器上创build存储,所以我试图从store.js文件复制代码到服务器,但它没有工作。 我能做些什么来解决这个非常不愉快的错误? routes.js const routes = ( { component: App, routes: [ { path: '/', exact:true, component: Home }, { path: '/login', exact:true, component: Login }, { path: '/registration', exact:true, component: Registration }, { path: '/person/:id', exact:true, component: UserPage }, { path: '/myPage', exact:true, […]

请问react-router会影响页面加载时间吗?

例如,如果在routes.js文件中有3个路由,而在同一个文件中有10个路由。 包含10个路由的文件是否需要较长时间才能加载? 假设每个路由都导入相同大小的组件。 或者我们进入路线后,组件将被导入?

configurationNode.js / Express服务器以使用React-Router BrowserRouter

在React Router v4中, 文档提到服务器需要专门configuration为使用BrowserRouter。 你如何configuration你的Node.js / Express服务器来使用BrowswerRouter?

带有react-router的webpack中的多个入口点

我正面临着巨大的问题,试图与反应路由器一起实现多个入口点。 目的是实现使用webpack做一些build议由https://github.com/petehunt/webpack-howto 。 到目前为止,我已经把它设置为这样: webpack.config.js entry: { entry1: __dirname + './entry1.jsx', entry2: __dirname + './entry2.jsx' } routes.jsx export default ( <Route path='/' name='app' handler={App}> <DefaultRoute handler={entry1} /> <Route name='entry2' handler={entry2}/> </Route> ); 无论何时运行此代码以在客户端上实例化Router的实例 Router.run(routes, Router.HistoryLocation, (Handler, state) => { React.render(<Handler />, document.getElementById('app')); }); Node.js会尝试在服务器上运行这个代码,因为DOM不可用,所以显然会失败。 它会产生一个错误。 是否有任何适当的方法来实现多入口点与react-router?

react-router没有node.js

是否有可能使用react-router而不安装node.js? 正如我所看到的,这是没有办法使用反应路由器,而不使用node.js。 正如我所看到的,我们应该安装node.js并使用npm来安装react-router。 只有这样我们才能使用它。 react-router是node.js组件,还是可以单独下载? 谢谢!

反应路由器Web服务器的开发

我刚开始使用react-router,我想使用browserHistory。 到目前为止,我一直在使用watchify和一个chrome插件使用热重载进行开发,以监视静态内容的变化。 这意味着我正在直接在静态内容上进行所有的开发,并在浏览器中刷新静态内容,而不涉及Web服务器。 现在开始挑战 – 你不能在文件上使用browserHistory://因为原点是null,并且历史api会抛出一个错误。 此外,browserHistory更好,build议所以我想使用它。 麻烦的是它打破了我的开发工作stream程。 如果每次我需要testing一个更改,我都要将我的静态内容部署到本地的tomcat实例,这将会非常缓慢。 我认为NPM社区必须已经有了一个解决scheme,我只是不知道要search什么工具。 我认为必须有一些NPM插件监视我的SPA内容的变化,build立它,然后将它部署到networking服务器。 我做了一些这样的工具search,但我还没有find我需要的东西。 任何人都可以协助 我想也许我只需要Grunt自动推送到我本地的Tomcat …无论什么解决scheme,我需要一个快速开发工作stream程。 🙂

使用React刷新浏览器历史logging路由器从我的API返callback用

据我所知,要正确使用React Router中的browserHistory对象,我们需要使用通配符*路由,以便每次刷新时用户都返回单页应用程序。 这成为一个问题是当我的客户端URL是一样的我的APIurl。 例如,假设我有一个名为example.com的网站,并且该网站上的其中一个网页是example.com/profile 。 如果我刷新,预期的行为是它将简单地重新加载网站example.com并正确地路由到/profile ,因为通配符路由应该已经返回客户端单页应用程序。 如果这不起作用,如果我有一个API路线/profile ,即example.com/profile 。 现在,当用户刷新页面,而不是被返回到configuration文件页面,而是从我的API返回一个JSON响应。 根据通配符路由的声明顺序,我可以在刷新时返回API响应,也可以在刷新时返回单页应用程序,但是当API url与客户端浏览器url相同时,则不能同时返回。 围绕这个问题有什么build议吗? 我目前的解决scheme是将我的所有API路由迁移到拥有/api/前缀给他们。

如何确定当前路线在React中是否有效

反应v0.14.7 / react-router:v2.0.1 我有我的路线设置如下: import { Router, Route, IndexRoute, hashHistory } from "react-router" ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="/locations" component={Locations}/> <Route path="/products" component={Products}/> </Route> </Router>, document.getElementById('app')); 我正在尝试在我的一个React类中编写一个方法(使用以下API创build) export default class MyClass extends React.Component {…} …确定当前URL的path是否是特定path的path。 例如。 假设当前的URL是http://domain/products然后调用: isActive('/products') 会返回TRUE 我知道的反应路由器的Link对象activeClassName 。 但是我需要编写一些东西,以编程方式在不同的位置查找<link/>对象。 查看node_modules/react-router/我可以看到modules/isActive.js做我所需要的,但它不是在modules/index.js export ,所以我假设我无法访问它? 我也从API文档看到,有一个RouterContext isActive方法 ,但是我又不知道如何调用这个方法?

反应路由器混淆请求url

我正在试图通过react-router实现下面的嵌套url。 我的问题是,当嵌套在路由器组件中时,Feed组件将GET和POST请求都发送到错误的URL,如下所示: ReactDOM.render(( <Router history = { browserHistory }> <Route component={ NavBar }> <Route path='/' component={ Feed } url='/api/threads' pollInterval={ 2000 } /> <Route path='signup' component={ Signup } /> </Route> </Router> ), document.getElementById('root')); 将请求发送到http://localhost:3000/?_=1463499798727 ,它返回index.html的内容,由于ajax请求期待json数据而不是html,并且是错误的,所以会导致错误。 而 ReactDOM.render(( <Router history = { browserHistory }> <Route component={ NavBar }> <Route path='signup' component={ Signup } /> </Route> </Router> […]

Express将覆盖react-router客户端路由

我不想使用服务器端渲染,因为这是一个绝对痛苦的工作,我已经得到了一切工作没有它。 但是,如果我做一个新的url/test并访问本地主机:3000 /testing我得到Cannot get /test 这就是我的索引页面被提供 app.get("/", function(req, res) { res.sendFile(__dirname + '/client/index.html') }) 路线文件 const routes = ( <div> <Route path="/" component={ AppContainer }> <IndexRoute component={ RegistrationContainer }/> <Route path="test" component={ StripeContainer }/> </Route> </div> ) export default routes