您的位置：首页 > Web前端 > React

React Router的一个完整示例

2017-04-12 10:34 381 查看
本博文提供一个单网页结构网页（SPA）使用React Router路由控制跳转的完整例子。http://blog.csdn.net/future_todo/article/details/53036638

可以在我的github 中clone或者fork 
https://github.com/zrysmt/react-demo/tree/master/demo03

关于配置可以查看我之前的一篇博客：一步一步进入React的世界（React+Webpack+ES6组合配置）。


1.整个目录结构


 

- build是编译后的文件夹 

- src 放入源码 

+ components组件 

+ global 通用组件和SCSS 

+ … 分模块 

+ app.js入口 

- index.html


2.源码

关于源码可以在开头给出的github中找到详细的完整例子，这里就介绍重要的几个文件源码 

记住要安装react-router
npm i react-router -S
1


2.1 index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Our Home,Our Heart</title>
<meta name="viewport" content="width=device-width,initial-scale = 1.0,user-scalable=no">
</head>

<body>
<div id="content">
</div>
<script src="build/bundle.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15


2.2 入口文件app.js

关于react router的基础知识我们可以参考阮一峰老师的博客作为入门指导。
import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,IndexRoute,hashHistory} from 'react-router';

import './components/global/global.scss';

import Nav from './components/global/menu';
import Home from './components/home/home';
import Story from './components/story/story';

class App extends React.Component{
render(){
return(
<div>
<Nav/>
{this.props.children}
</div>
)
}
}

ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/Story" component={Story}/>
</Route>
</Router>
),document.body
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

简单解释下: 

组件App除了包含Nav组件，还应该包括主体内容 

当使用index.html访问的时候，是在项目根目录下，这样会先加载APP组件，APP组件包含
{this.props.children}
，便会加载
<IndexRoute/>
里面定义的组件Home。用户访问’/’相当于：
<App>
<Nav/>
<Home/>
</App>
1
2
3
4


2.3 Nav组件

/components/global/menuLi.jsx 

/components/global/menu.jsx

最小一块组件menuLi.jsx
import React from 'react';
import {Link} from 'react-router';
class MenuLi extends React.Component{
render(){
let linkTo = this.props.name =="Home"?"/":"/"+this.props.name;
return (
<li>
<Link to={linkTo}>
{this.props.name}
</Link>
</li>
);
}
}
export default MenuLi;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Link
组件用于取代
<a>
元素，生成一个链接，允许用户点击后跳转到另一个路由 

- Nav组件 menu.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import MenuLi from './menuLi';
import './menu.scss';

let menuLis = ["Home","Story","Travel","TimeLine","Future"];
class MenuUl extends React.Component{
render(){
return(
<ul>
{
menuLis.map(function(menuLi) {
return <MenuLi name={menuLi}/>
})
}
</ul>
);
}
}
class Nav extends React.Component{
render(){
return(
<nav>
<div id="menu">
<MenuUl/>
</div>
</nav>
)
}
}
export default Nav;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


2.4 Home组件

/components/home/home.jsx,示例比较简单
import React from 'react';
import ReactDOM from 'react-dom';
import "./home.scss";
class Home extends React.Component{
render(){
return (
<h5>这是home</h5>
);
}
}
export default Home;
1
2
3
4
5
6
7
8
9
10
11


2.5 Story组件

import React from 'react';
import ReactDOM from 'react-dom';
import "./story.scss";

class Story extends React.Component{
render(){
return (
<h5>这是story</h5>
);
}
}
export default Story;
1
2
3
4
5
6
7
8
9
10
11
12

其余几个组件不一一列出了

可以在我的github 中clone或者fork,查看完整的例子代码

参考阅读:

React Router 使用教程–阮一峰



版权声明：本文为博主原创文章，转载请注明出处和原文链接。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航