Tag: 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