我正在尝试使用ES6实现react路由器,但是我是否只更改了URL,而IndexRoute正确呈现,对于其他路由,我在RouterContext中获取null。这是我的代码:
app.js
import jquery from 'jquery';
import '../node_modules/bootstrap/dist/js/bootstrap';
import React from 'react';
import ReactDOM from 'react-dom';
import './assets/js/plugins/morris/morris.min';
import './assets/js/plugins/morris/morris-data';
import { Router, Route, Link, browserHistory, DefaultRoute} from 'react-router';
import routes from './routes';
ReactDOM.render(
routes, document.getElementById('app')
)
routes.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, hashHistory, DefaultRoute} from 'react-router';
import { App } from './components/main';
import { Home} from './components/home/home';
import { Table} from './components/table/table';
import { IndexRoute } from 'react-router';
let routes = (
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route name="table" path="table" component={Table} />
</Route>
</Router>
);
export default routes
main.js
import React from 'react';
import ReactDOM from 'react-dom';
export default class App extends React.Component{
render(){
return(
<div>
<h1>Route Render</h1>
{this.props.children}
</div>
)
}
}
home.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, DefaultRoute, IndexLink} from 'react-router';
export class Home extends React.Component{
constructor() {
super();
this.state = {
authors: []
}
}
componentWillMount(){
this.setState({authors: [{id: 1, author: 'Sone' },{ id: 2, author: 'Batica'}]})
}
render(){
var createAuthorRow = function(author){
return (
<tr key = {author.id}>
<td>{author.id}</td>
<td>{author.author}</td>
</tr>
)
}
return(
<div>
<h1>Authors</h1>
<table className="table">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
</tr>
</thead>
<tbody>
{this.state.authors.map(createAuthorRow, this)}
</tbody>
</table>
<Link to="table">Tabla</Link>
</div>
);
}
}