我正在尝试使用react-router( 版本^ 1.0.3 )重定向到另一个视图,这让我很累。
import React from 'react'; import {Router, Route, Link, RouteHandler} from 'react-router'; class HomeSection extends React.Component { static contextTypes = { router: PropTypes.func.isRequired }; constructor(props, context) { super(props, context); } handleClick = () => { console.log('HERE!', this.contextTypes); // this.context.location.transitionTo('login'); }; render() { return ( <Grid> <Row className="text-center"> <Col md={12} xs={12}> <div className="input-group"> <span className="input-group-btn"> <button onClick={this.handleClick} type="button"> </button> </span> </div> </Col> </Row> </Grid> ); } }; HomeSection.contextTypes = { location() { React.PropTypes.func.isRequired } } export default HomeSection;
我所需要的只是将使用发送到’/ login’就是这样。
我能做什么 ?
控制台错误:
未捕获的ReferenceError:未定义PropTypes
用我的路线归档
// LIBRARY /*eslint-disable no-unused-vars*/ import React from 'react'; /*eslint-enable no-unused-vars*/ import {Route, IndexRoute} from 'react-router'; // COMPONENT import Application from './components/App/App'; import Contact from './components/ContactSection/Contact'; import HomeSection from './components/HomeSection/HomeSection'; import NotFoundSection from './components/NotFoundSection/NotFoundSection'; import TodoSection from './components/TodoSection/TodoSection'; import LoginForm from './components/LoginForm/LoginForm'; import SignupForm from './components/SignupForm/SignupForm'; export default ( <Route component={Application} path='/'> <IndexRoute component={HomeSection} /> <Route component={HomeSection} path='home' /> <Route component={TodoSection} path='todo' /> <Route component={Contact} path='contact' /> <Route component={LoginForm} path='login' /> <Route component={SignupForm} path='signup' /> <Route component={NotFoundSection} path='*' /> </Route> );
对于简单的答案,您可以使用Link来自的组件react- router,而不是button。有一些方法可以更改JS中的路由,但是似乎您在这里不需要。
Link
react- router
button
<span className="input-group-btn"> <Link to="/login" />Click to login</Link> </span>
要在1.0.x中以编程方式执行此操作,您需要在clickHandler函数中这样做:
this.history.pushState(null, 'login');
取自此处的升级文档
您应该通过this.history放置在路由处理程序组件上react- router。如果它的子组件低于routes定义中提到的子组件,则可能需要将其进一步传递
this.history
routes