router的实现跳转

最新推荐文章于 2025-09-18 15:34:28 发布

原创最新推荐文章于 2025-09-18 15:34:28 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React

Redirect

Recirect 可以跳转到另外一个路由中。

props

from

你想开始redirect的地址，包括一些动态的地址。默认为* ,这样任何匹配不到路由规则的情况多回被重定向到另外一个地方。

你想要重定向到得路由名字。

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

要被定位到的路由名字，或者是完整的路径

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'));