一个最简单的react-router设置

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;


Menu.jsx
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;