index,jsx(入口文件)
import '../common/lib';
import App from '../component/App';
import ReactDOM from 'react-dom';
import React from 'react';
import { Link } from 'react-router';
import { Router, Route, Redirect, IndexRoute } from 'react-router';
import { hashHistory } from 'react-router'
import Menu from '../component/Menu';
import Text1 from '../component/Text1';
import Text2 from '../component/Text2';
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Text1}/>
<Route path="menu" component={Menu}/>
<Route path="text1" component={Text1}/>
<Route path="text2" component={Text2}/>
</Route>
</Router>
), document.getElementById('react-content'));
App.jsx
import React from 'react';
import { Link } from 'react-router';
import './App.less';
import Menu from '../component/Menu';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<nav>
<h3>总菜单</h3>
<Menu/>
</nav>
{this.props.children}
</div>
)
}
}
export default App;
import React from 'react';
import { Link } from 'react-router';
import Text1 from '../component/Text1';
import Text2 from '../component/Text1';
class Menu extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<ul>
<li><Link to="text1">text1</Link></li>
<li><Link to="text2">text2</Link></li>
</ul>
</div>
)
}
}
export default Menu;
Text1.jsx
import React from 'react';
import { Link } from 'react-router';
class Text1 extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<h3>你好,这里是text1</h3>
)
}
}
export default Text1;
Text2.jsx
import React from 'react';
import { Link } from 'react-router';
class Text2 extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<h3>你好,这里是text2</h3>
)
}
}
export default Text2;