Redirect
Recirect 可以跳转到另外一个路由中。
props
from
你想开始redirect的地址,包括一些动态的地址。默认为* ,这样任何匹配不到路由规则的情况多回被重定向到另外一个地方。
to
你想要重定向到得路由名字。
params
默认情况下,这些参数将会自动传递到新的路由,你也可以指定他们,特别是你不需要的时候。
query
和params一样
<Route handler={App}>
<Route name="contact" handler={Contact}/>
<Route name="about-user" path="about/:userId" handler={UserProfile}/>
<Route name="course" path="course/:courseId">
<Route name="course-dashboard" path="dashboard" handler={Dashboard}/>
<Route name="course-assignments" path="assignments" handler={Assignments}/>
</Route>
<Redirect from="get-in-touch" to="contact" />
<Redirect from="profile/:userId" to="about-user" />
<Redirect from="profile/me" to="about-user" params={{userId: SESSION.USER_ID}} />
</Route>
Link
用于在应用程序中导航的一种主要方式。Link将会渲染出标签属性href 变得容易被理解。
当Link定位的路由被激活的时候自动 显示为 定义的 activeClassName 和/或者
activeStyle 定义的样式。
Props
to
要被定位到的路由名字,或者是完整的路径
params
包含了名字/值的对象,和路由地址的动态段对应一致。
query
一个包含名字/值 的对象,它会成为地址中的查询参数
var Test = React.createClass({ go_to_test1: function () { this.props.history.pushState(null, '/test1'); }, render: function () { return (<div> <div> <h1>Hello, Remi!</h1> <p> <Link to='/'>home</Link> </p> <p> <Link to='/test1'>To test1</Link> <button onClick={this.go_to_test1}>展示test1</button> </p> <p> <Link to='/test2'>To test2</Link> </p> </div> <div> {this.props.children} </div> </div>); } }); var routes = ( <Router> <Route path="/" component={Test}> <Route path="test1" component={window.Test1}/> <Route path="test2" component={window.Test2}/> </Route> </Router> ); ReactDOM.render(routes, document.getElementById('root'));