使用ES6实现react-router的问题

时间:2016-12-13 12:11:38

标签: reactjs ecmascript-6 react-router

我正在尝试使用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>
          );
     }
  }

0 个答案:

没有答案