@H_502_0@首先先来看一下，效果图
@H_502_0@下面来看具体代码 @H_502_0@index.html
<!DOCTYPEhtml> <html> <head> <Metacharset="utf-8"> <title></title> <scriptsrc="common/react.min.js"></script> <scriptsrc="common/react-dom.js"></script> <scriptsrc="common/browser.min.js"></script>//浏览器解析jsx用的的js <scriptsrc="common/ReactRouter.min.js"></script> <linkrel="stylesheet"href="css/style.css"> </head> <body> <divid="app"> </div> </body> <scriptsrc="component/index.jsx"type="text/babel"></script> </html>@H_502_0@index.jsx
varRouter=ReactRouter.Router; varRoute=ReactRouter.Route; varLink=ReactRouter.Link; varIndexRoute=ReactRouter.IndexRoute; varbrowserHistory=ReactRouter.browserHistory; /** *标题 */ varHeader=React.createClass({ render:function(){ return( <header> <p>标题</p> </header> ); } }); /** *结尾 */ varFooter=React.createClass({ render:function(){ return( <footer> <p>结尾</p> </footer> ); } }); /** *列表 */ varNavlist=React.createClass({ render:function(){ return( <section> <nav> <Linkto="/list">列表一</Link> <Linkto="/about">列表二</Link> </nav> </section> ); } }); /** *列表一 */ varList=React.createClass({ render:function(){ return( <ul> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> <li>我是第四个</li> <li>我是第五个</li> </ul> ); } }); varAbout=React.createClass({ render:function(){ return( <ul> 第二列 </ul> ); } }); //应用入口 varApp=React.createClass({ render(){ return( <div> <Header/> <Navlist/> {this.props.children} <Footer/> </div> ) } }); //定义页面上的路由 ReactDOM.render( <Routerhistory={browserHistory}> <Routepath="/"component={App}> <IndexRoutecomponent={List}/>//默认加载 <Routepath="list"component={List}/> <Routepath="about"component={About}/> </Route> </Router>,document.getElementById('app') );@H_502_0@
history 配置
React Router 是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。常用的 history 有三种形式， 但是你也可以使用 React Router 实现自定义的 history。
这三个有什么区别呢：
createHashHistory
这是一个你会获取到的默认 history ，如果你不指定某个 history 。它用到的是 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。这个 支持 ie8＋ 的浏览器，但是因为是 hash 值，所以不推荐使用。
createBrowserHistory
Browser history 是由 React Router 创建浏览器应用推荐的 history。它使用 History API 在浏览器中被创建用于处理 URL，新建一个像这样真实的 URL example.com/some/path。
Memoryhistory
不会在地址栏被操作或读取。
