3

我想比较 react-dom-router 与 page.js 在 react.js 中的路由。我使用的例子是：

import React from "react";
import render from "react-dom";

import {
  BrowserRouter as Router,
  Route,
  browserHistory,
  Link
} from 'react-router-dom';
import { About } from "./About";
import { Root } from "./Root";
import { Address } from "./Address";
import { Login } from "./Login";

export class Header extends React.Component
{
    render()
    {
        return(
                <div className="container-fluid">
                    <Router history={browserHistory}>
                <div>
                    <nav className="navbar navbar-inverse">
                        <div className="container-fluid">
                            <a className="navbar-brand" href="#">Basic Application</a>
                            <ul className="nav navbar-nav">
                                <li className="active">
                                    <Link to="/home">Home</Link>
                                </li>
                                <li>
                                    <Link to="/address">Address</Link>
                                </li>
                                <li>
                                    <Link to="/about">About</Link>
                                </li>

                                <li>
                                    <Link to="/login">Login</Link>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <Route path='/home' component={Root}/>
                    <Route path='/address' component={Address} />
                    <Route path='/login' component={Login} />
                </div>
            </Router>
                </div>
            );
    }
}

使用 page.js：

/*
* main application
*/

import React from 'react'
import ReactDOM from 'react-dom'
import page from 'page'


/* Component */
let Page1 = React.createClass({
  render(){
    return (<div><a href="/home/user">index!</a></div>)
  }
});

let Page2 = React.createClass({
  render(){
    return (<div><a href="/home/">user!</a></div>)
  }
});

let Router = React.createClass({

  componentDidMount() {

    let self = this;

    this.props.routes.forEach(function (route) {

      let url = route[0];
      let Component = route[1];

      page(url, function (ctx) {
        self.setState({
          component: <Component params={ctx.params} querystring={ctx.querystring} />
        });
      });

    });

    page.start({hashbang:false});

  },

  getInitialState() {
    return { component: <div>Hello</div>};
  },

  render() {
    return this.state.component;
  }

});

/* Routes */

let routes = [
  ['/home/', Page1],
  ['/home/user', Page2]
];

/* Render*/

ReactDOM.render(<Router routes={routes} />, 
document.getElementById('app'));

有人告诉我这page.js比 react-router 轻。还有其他相同的偏好吗？

4

0 回答 0