I have the following:
import React from 'react';
import Link from 'react-router';
class Nav extends React.Component {
render () {
return (
<ul>
<li><Link to='/test1'>test1</Link></li>
<li><Link to='/test2'>test2</Link></li>
</ul>
);
}
}
export default Nav;
import React from 'react';
import { Route, Router, IndexRoute } from 'react-router';
import ReactDOM from 'react-dom';
import App from './index.jsx';
import Test1 from './test1.jsx';
import Test2 from './test2.jsx';
ReactDOM.render((
<Router>
<Route path="/" component={App} />
<Route path="/test1" component={Test1} />
<Route path="/test2" component={Test2} />
</Router>
), document.getElementById('app'));
import React from 'react';
import {render} from 'react-dom';
import Nav from './nav.jsx';
class App extends React.Component {
render () {
return (
<div>
<Nav />
<p> Hello React!</p>
</div>
);
}
}
export default App;
Nav
import {Link} from 'react-router'
Above should do your job. Can you give it a try once?