Questions tagged «react-router»

通过使用react-router我可以使用Link元素创建由React Router本机处理的链接。 我在内部看到它的呼唤this.context.transitionTo(...)。 我想导航。不是来自链接，而是来自下拉菜单（例如）。如何在代码中执行此操作？什么this.context啊 我看到了Navigationmixin，但是如果没有我可以这样做mixins吗？

1427 reactjs  react-router 

我正在使用React-router，当我单击链接按钮时，它可以正常工作，但是当我刷新网页时，它不会加载我想要的内容。 例如，我进去了localhost/joblist，一切都很好，因为我按链接到达这里。但是，如果刷新网页，则会得到： Cannot GET /joblist 默认情况下，它不是这样工作的。最初，我的URL为localhost/#/，localhost/#/joblist并且它们工作正常。但是我不喜欢这种URL，所以尝试删除它#，我写道： Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); }); 这个问题不会发生localhost/，这个总是返回我想要的。 编辑：这个程序是单页的，所以/joblist不需要向任何服务器询问任何内容。 EDIT2：我的整个路由器。 var routes = ( <Route name="app" path="/" handler={App}> <Route name="joblist" path="/joblist" handler={JobList}/> <DefaultRoute handler={Dashboard}/> <NotFoundRoute handler={NotFound}/> </Route> ); Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); });

652 javascript  reactjs  url  react-router 

我收到此错误： 未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。 这是我的代码： var React = require('react') var ReactDOM = require('react-dom') var Router = require('react-router') var Route = Router.Route var Link = Router.Link var App = React.createClass({ render() { return ( <div> <h1>App</h1> <ul> <li><Link to="/about">About</Link></li> </ul> </div> ) } }) var About = require('./components/Home') ReactDOM.render(( <Router> <Route path="/" component={App}> …

528 reactjs  react-router 

__firebase_request_key从服务器重定向后，如何在我的routes.jsx文件中定义路由以从Twitter的单点登录过程生成的URL 捕获参数值？ http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla 我尝试使用以下路由配置，但:redirectParam没有捕获上述参数： <Router> <Route path="/" component={Main}> <Route path="signin" component={SignIn}> <Route path=":redirectParam" component={TwitterSsoButton} /> </Route> </Route> </Router>

412 reactjs  react-router 

在当前版本的React Router（v3）中，我可以接受服务器响应并使用 browserHistory.push转到相应的响应页面。但是，这在v4中不可用，我不确定哪种适当的处理方式。 在此示例中，使用Redux，当用户提交表单时，components / app-product-form.js调用this.props.addProduct(props)。服务器返回成功后，该用户将被带到“购物车”页面。 // actions/index.js export function addProduct(props) { return dispatch => axios.post(`${ROOT_URL}/cart`, props, config) .then(response => { dispatch({ type: types.AUTH_USER }); localStorage.setItem('token', response.data.token); browserHistory.push('/cart'); // no longer in React Router V4 }); } 如何从React Router v4的功能重定向到购物车页面？

360 reactjs  react-router  react-router-v4 

我使用React Router的 React.js应用程序具有以下结构： var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path="/" handler={Index}> <Route path="comments" handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); ReactRouter.run(routes, function (Handler) { React.render(<Handler/>, document.body); …

315 javascript  properties  reactjs  react-router 

我想用可选的path参数声明一个路径，因此当我添加它时，页面会做一些额外的事情（例如，填充一些数据）： http：// localhost / app / path / to / page <=渲染页面 http：// localhost / app / path / to / page / pathParam <=根据pathParam使用某些数据渲染页面 在我的React Router中，我具有以下路径，以支持两个选项（这是一个简化的示例）： <Router history={history}> <Route path="/path" component={IndexPage}> <Route path="to/page" component={MyPage}/> <Route path="to/page/:pathParam" component={MyPage}/> </Route> </Router> 我的问题是，我们可以在一条路线中声明吗？如果仅添加第二行，则找不到没有参数的路由。 编辑＃1： 这里提到的有关以下语法的解决方案对我而言不起作用，这是正确的解决方案吗？文档中是否存在？ <Route path="/product/:productName/?:urlID?" handler={SomeHandler} /> 我的react-router版本是：1.0.3

306 javascript  reactjs  react-router  react-router-v4 

我目前正在使用React Router v4来嵌套路由。 最接近的示例是React-Router v4文档中的route配置 。 我想将我的应用分为两部分。 前端和管理区域。 我在想这样的事情： <Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> <Match pattern="/home" component={Dashboard} /> <Match pattern="/users" component={UserPage} /> </Match> <Miss component={NotFoundPage} /> 前端的布局和样式与管理区域不同。因此，在首页中，回家的路线大约应该是子路线。 / home应该呈现在Frontpage组件中，/ admin / home应该呈现在Backend组件中。 我尝试了一些变体，但始终以不打/ home或/ admin / home结尾。 编辑-19.04.2017 因为这篇文章现在有很多观点，所以我用最终解决方案对其进行了更新。希望对您有所帮助。 编辑-08.05.2017 …

261 javascript  reactjs  nested  react-router  react-router-v4 

我们如何this.props.history.push('/page')在React-Router v4中传递参数？ .then(response => { var r = this; if (response.status >= 200 && response.status < 300) { r.props.history.push('/template'); });

216 reactjs  react-router 

我想显示title在<AppBar />以某种方式从目前的路线通过。 在React Router v4中，如何将<AppBar />当前路由传递到titleprop中？ <Router basename='/app'> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' /> <Route path='/customers' component={Customers} /> </main> </Router> 有没有办法通过从自定义自定义标题prop上<Route />？

180 reactjs  react-router  react-router-v4 

我正在使用React和Redux开发一个Web应用程序，当我开始我的项目时，我得到了这个： Line 13: Unexpected use of 'location' no-restricted-globals Search for the keywords to learn more about each error. 我搜索了很多有关如何解决它的方法，但是找不到任何答案对我有帮助，因此我转向了堆栈溢出。 有人知道如何解决此错误吗？感谢您能获得的所有帮助。

168 javascript  reactjs  react-router  eslint 

有人可以解释一下 <Route exact path="/" component={Home} /> 和 <Route path="/" component={Home} /> 我不知道“确切”的意思

161 reactjs  react-router  react-router-dom 

React Router允许React应用处理/arbitrary/route。为了使其正常工作，我需要我的服务器在任何匹配的路由上发送React应用程序。 但是webpack开发服务器不能处理任意端点。 这里有一个使用附加快递服务器的解决方案。 如何允许webpack-dev-server允许react-router的入口点 但是我不想启动另一个Express服务器来允许路由匹配。我只想告诉webpack开发服务器匹配任何URL，并向我发送我的react应用。请。

148 reactjs  ecmascript-6  webpack  react-router 

我正在使用react-router进行反应。我正在尝试在react-router的“链接”中传递属性 var React = require('react'); var Router = require('react-router'); var CreateIdeaView = require('./components/createIdeaView.jsx'); var Link = Router.Link; var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render : function(){ return( <div> <Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link> <RouteHandler/> </div> ); } }); …

137 javascript  reactjs  react-router 

我是ReactJS和React-Router的新手。我有一个组件，通过props <Link/>从react-router接收一个对象。每当用户单击该组件内部的“下一步”按钮时，我都想<Link/>手动调用对象。 现在，我正在使用refs访问支持实例，并手动单击<Link/>生成的'a'标记。 问题：有没有办法手动调用链接（例如this.props.next.go）？ 这是我目前的代码： //in MasterPage.js var sampleLink = <Link to="/sample">Go To Sample</Link> <Document next={sampleLink} /> //in Document.js ... var Document = React.createClass({ _onClickNext: function() { var next = this.refs.next.getDOMNode(); next.querySelectorAll('a').item(0).click(); //this sounds like hack to me }, render: function() { return ( ... <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div> …

131 javascript  reactjs  react-router