我想将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
比反应路由器轻。是否还有其他偏好?