10分钟搞定react-router

最新推荐文章于 2025-09-07 22:13:39 发布

weixin_30235225

最新推荐文章于 2025-09-07 22:13:39 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cshi/p/6121123.html

本文详细介绍 React Router 的安装、配置及使用方法，包括平级路由与嵌套路由的应用实例，并通过具体代码展示了如何实现页面间的跳转。

1.路由的安装：

$ npm install -S react-router

2.引入路由文件

import {Router, Route, browserHistory} from 'react-router';

3.配置路由器

　　平级路由（做跳转用）

const router = (
  <Router history={browserHistory}>
    <Route path="/" component={App}/>
    <Route path="about" component={About}/>
    <Route path="concat" component={Concat}/>
    <Route path="list/:id" component={List}/>
  </Router>
);
// Render the main component into the dom
ReactDOM.render(router, document.getElementById('app'));

　　嵌套路由（做嵌套）

const router = (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
      <Route path="concat" component={Concat}/>
      <Route path="list/:id" component={List}/>
    </Route>
  </Router>
);

应用：

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>React Router Demo</h1>
        <hr />
        <p>
          by <a href="http://stylechen.com/" target="_blank">stylechen.com</a>
        </p>
          <Link to="/">Home</Link>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/concat">Concat</Link></li>
          <li><Link to="/list/001">List 001</Link></li>
          <li><Link to="/list/002">List 002</Link></li>
        </ul>
      </div>

    );
  }
}