一个最简单的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;