react-router的测试例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--react,react-dom取官网的react地址,ReactRouter取官方github最新版本,browser.min.js 为babel-core内文件，版本号参考react/examples/basic-jsx/index.html内写的地址和版本-->
		<script src="js/react.js"></script>
		<script src="js/react-dom.js"></script>
		<script src="js/ReactRouter.js"></script>
		<script src="js/browser.min.js"></script>
	</head>
	<body>
		<div id="app"></div>
	    <script type="text/babel">
	    	let { Router,Route,Link,browserHistory,hashHistory,IndexRoute,Redirect} =ReactRouter;
	    	//IndexRoute是不支持参数传入的
	    	//Redirect 这个的跳转其实路径上没有改变内容，只是去to地址取出内容装入信息,目前看意义不大
	        //<IndexRedirect to="/welcome" /> IndexRedirect主键可以指定默认使用的加载信息，有意义
	        //Link <Link to="/about">About</Link> 可以生成跳转路径
	        //ReactRouter.browserHistory.push("/react_test/index.html"); 使用这个方法是ajax加载路径的意思，即history.pushState
	        //IndexLink 这个用于当跳转到首页时使用此标签
	        //hashHistory 即url地址为index.html#/account/xxxx 这种，browserHistory 这种的话为index.html/account/xxxx 为这种（直接访问index.html会报错，本地测试使用hashHistory方式）
	    	let App = React.createClass({render() {
	    		return (<div>
	    					{this.props.children}
	    				</div>);
	    	}});
	    	
	    	let Home = React.createClass({render() {
	    		return (<div>
	    					<h1>我是首页</h1>
	    					<p>跳转到<Link to="/about">/about</Link></p>
	    					<p>{this.props.children}</p>
	    				</div>);
	    	}});
	    	
	    	
	    	let Repos = React.createClass({render() {
	    		return (<div>
	    					<p>Repos{this.props.params.name}</p>
	    					<p>{this.props.location.query.bar}</p>
	    					<p>{this.props.children}</p>
	    				</div>);
	    	}});
	    	
	    	let About = React.createClass({
	    			getInitialState() {
	    				console.log("getInitialState->"+window.location.hash.substr(1));
					    return {
					      route: window.location.hash.substr(1)
					    }
					  },componentDidMount() {
						console.log("componentDidMount->"+window.location.hash.substr(1));
					    window.addEventListener('hashchange',() => {
					      console.log("hashchange->"+window.location.hash.substr(1));
					      if(this.isMounted()){
					      	this.setState({//
						        route: window.location.hash.substr(1)
						      });
					      }
					    })
					  },render() {
	    				return (<div>
		    						<p>About</p>
		    						<p>跳转到<Link to="/repos/hello">/repos/hello</Link></p>
		    						{this.props.children}
		    					</div>);
	    			}
	    		});
	    	
	    	let Inbox = React.createClass({render() {return <div></div>}});
	    	
			ReactDOM.render(
				<Router history={hashHistory}>
				 	<Route path="/" component={App} >
				 		<IndexRoute component={Home}/>
				    	<Route path="/repos/:name" component={Repos}/>
				    	<Route path="/about" component={About}/>
				    	<Route path="/inbox" component={Inbox}>
							<Redirect from="messages/:name" to="/repos/:name" />
						</Route>
				 	</Route>
				</Router>,document.getElementById('app'));
	    </script>
	</body>
</html>
这个可以在浏览下直接打开，用的是hashHistory这样就可以用xxx.html#/repos 的直接访问
react-router的测试例子

相关文章
