React学习笔记二——react-router

今天写了一个关于react-router的demo，因为不喜欢下载太多的依赖包，所以就直接引得js，解析会比较慢一些。

首先先来看一下，效果图

下面来看具体代码

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>

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')
);

history 配置

React Router 是建立在 history 之上的。简而言之，一个 history 知道如何去监听浏览器地址栏的变化，并解析这个 URL 转化为 location 对象，然后 router 使用它匹配到路由，最后正确地渲染对应的组件。常用的 history 有三种形式，但是你也可以使用 React Router 实现自定义的 history。

createHashHistory
createBrowserHistory
createMemoryHistory

这三个有什么区别呢：

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

不会在地址栏被操作或读取。

原文链接：https://www.f2er.com/react/306850.html