Questions tagged «react-router»

我一直在想，我对客户端和服务器之间的路由感到困惑。假设我在将请求发送回Web浏览器之前使用ReactJS进行服务器端渲染，并使用react-router作为客户端路由在页面之间切换而不刷新为SPA。 我想到的是： 路线如何解释？例如，从首页（/home）到帖子页面（/posts）的请求 路由在服务器端还是客户端去哪里？ 它如何知道如何处理？

108 javascript  reactjs  routes  react-router  url-routing 

我有时看到人们在withRouter导出组件时将它们包装起来： import { withRouter } from 'react-router-dom'; class Foo extends React.Component { // ... } export default withRouter(Foo); 这是做什么用的，什么时候应该使用？

108 reactjs  react-router 

我正在将我的React应用程序从webpack-dev-server过渡到nginx。 当我进入根URL“ localhost：8080 / login”时，我只是得到一个404，并且在我的nginx日志中，我看到它正在尝试获取： my-nginx-container | 2017/05/12 21:07:01 [error] 6#6: *11 open() "/wwwroot/login" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /login HTTP/1.1", host: "localhost:8080" my-nginx-container | 172.20.0.1 - - [12/May/2017:21:07:01 +0000] "GET /login HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X …

107 nginx  react-router 

有什么方法可以防止/#/使用react-router时在浏览器的地址栏中显示？那就是ReactJS。即，单击链接以转到新路线将显示localhost:3000/#/或 localhost:3000/#/about。取决于路线。

103 reactjs  react-router 

我不明白使用IndexRoute和IndexLink的目的是什么。似乎在任何情况下，除非激活了About路径，否则下面的代码都会首先选择Home组件。 <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> 与 <Route path="/" component={App}> <Route path="home" component={Home}/> <Route path="about" component={About}/> </Route> 第一种情况的优点/目的是什么？

102 javascript  reactjs  react-router  url-routing 

我是React Router的新手，并了解到重定向页面的方法有很多： 使用 browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); 使用 this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object } 在React Router v4中，有this.context.history.push("/path")和this.props.history.push("/path")。详细信息：如何在React Router v4中推送到历史记录？ 我对所有这些选项感到困惑，是否有最佳的方法来重定向页面？

102 reactjs  redux  react-router 

我从React-Router v3迁移到v4时遇到一些小问题。在v3中，我可以在任何地方执行此操作： import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); 如何在v4中实现这一目标。 我知道withRouter当您在Component中时，可以使用hoc ，react上下文或事件路由器props。但对我而言并非如此。 我正在寻找v4中的NavigatingOutsideOfComponents的等效项

100 reactjs  react-router 

试图使react-router（v4.0.0）和react-hot-loader（3.0.0-beta.6）正常播放，但是在浏览器控制台中出现以下错误： 警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件。 index.js： import React from 'react'; import ReactDom from 'react-dom'; import routes from './routes.js'; require('jquery'); import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.min.js'; import './css/main.css'; const renderApp = (appRoutes) => { ReactDom.render(appRoutes, document.getElementById('root')); }; renderApp( routes() ); route.js： import React from 'react'; import { AppContainer } from 'react-hot-loader'; import { Router, Route, browserHistory, …

99 reactjs  react-router  react-hot-loader 

我有以下内容： <Route name="app" path="/" handler={App}> <Route name="dashboards" path="dashboards" handler={Dashboard}> <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /> <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /> <DefaultRoute handler={DashboardExplain} /> </Route> <DefaultRoute handler={SearchDashboard} /> </Route> 使用DefaultRoute时，由于任何* Dashboard需要在Dashboard中呈现，因此SearchDashboard呈现不正确。 我想在“应用”路由内将DefaultRoute指向路由“ searchDashboard”。这是我可以使用React Router进行的操作，还是应该为此使用常规Javascript（用于页面重定向）？ 基本上，如果用户转到主页，我想将其发送给搜索仪表板。所以我想我正在寻找一个等效于React Router的功能window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

98 javascript  routes  reactjs  url-redirection  react-router 

我正在使用react-router开发一个React应用程序。我有一个项目页面，其URL如下： myapplication.com/project/unique-project-id 当项目组件加载时，我从componentDidMount事件触发了对该项目的数据请求。我现在遇到一个问题，如果我直接在两个项目之间切换，那么只有id会这样改变... myapplication.com/project/982378632 myapplication.com/project/782387223 myapplication.com/project/198731289 componentDidMount不会再次触发，因此不会刷新数据。我是否应该使用另一个生命周期事件来触发我的数据请求，或者使用其他策略来解决此问题？

97 reactjs  react-router 

我是ReactJs的新手。这是我的代码： var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); 并使用webpack进行编译。我也将Main组件添加到了别名中。控制台抛出以下错误： 我也阅读了以下链接： React Router失败的道具“历史记录”，未定义 未定义值时，如何解决历史记录标记为必需的问题？ 升级React-Router并将hashHistory替换为browserHistory 和网络上的许多搜索，但我无法解决此问题。React Router是版本4

96 reactjs  react-router 

除了可以在NavLink上设置“ activeClassName”和“ activeStyle”之外，在网站上创建指向非导航元素（例如，页眉或页脚中的非主导航）上的其他路线的链接时，是否有任何理由在链接上使用NavLink不需要活动状态/类？

94 reactjs  react-router  react-router-v4 

我在我的项目中使用react-router-dom 4.0.0-beta.6。我有如下代码： <Route exact path="/home" component={HomePage}/> 我想在HomePage组件中获取查询参数。我已经找到了location.searchparam，它看起来像这样：?key=value，所以它是未解析的。 用react-router v4获取查询参数的正确方法是什么？

87 react-router  react-router-v4  react-router-dom 

我必须根据浏览历史实现一些业务逻辑。 我想做的是这样的： reactRouter.onUrlChange(url => { this.history.push(url); }); URL更新后，有什么方法可以接收来自react-router的回调吗？

87 reactjs  react-router  react-router-v4  react-router-redux  react-router-dom 

我在使用react-router和react-bootstrap时遇到一些样式问题。下面是代码片段 import { Route, RouteHandler, Link } from 'react-router'; import AuthService from '../services/AuthService' import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap'; <Nav pullRight> <NavItem eventKey={1}> <Link to="home">Home</Link> </NavItem> <NavItem eventKey={2}> <Link to="book">Book Inv</Link> </NavItem> <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown"> <MenuItem eventKey="3.1"> <a href="" onClick={this.logout}>Logout</a> </MenuItem> </NavDropdown> </Nav> 这就是渲染时的样子。 …

85 react-router  react-bootstrap