react路由案例（⾮常适合⼊门）
前⾯已经已经讲过⼀次路由稍微有些复杂考虑到有些同学刚接触到我准备了⼀个简单的demo 就当⾃⼰也顺便复习⼀下
data.js
1 const data = [
2 {
3 name: 'Tacos',
4 description: 'A taco (/ˈtækoʊ/ or /ˈtɑːkoʊ/) is a traditional Mexican dish composed of a corn or wheat tortilla folded or rolled around a filling. A taco can be made with a variety of fillings, including beef, pork, chicken, seafood, vegetables and
5 items: [
6 { name: 'Carne Asada', price:
7 },
7 { name: 'Pollo', price: 6 },
8 { name: 'Carnitas', price: 6 }
9 ]
10 },
11 {
12 name: 'Burgers',
13 description: 'A hamburger (also called a beef burger, hamburger sandwich, burger or hamburg) is a sandwich consisting of one or more cooked patties of ground meat, usually beef, placed inside a sliced bun. Hamburgers are often served w
14 items: [
15 { name: 'Buffalo Bleu', price: 8 },
16 { name: 'Bacon', price: 8 },
17 { name: 'Mushroom and Swiss', price: 6 }
18 ]
19 },
20 {
21 name: 'Drinks',
22 description: 'Drinks, or beverages, are liquids intended for human consumption. In addition to basic needs, beverages form part of the culture of human society. Although all beverages, including juice, soft drinks, and carbonated drinks, hav
23 items: [
24 { name: 'Lemonade', price: 3 },
25 { name: 'Root Beer', price: 4 },
26 { name: 'Iron Port', price: 5 }
27 ]
28 }
29 ]
30
31 const dataMap = duce((map,category) => //重点看这⾥在⼲嘛对es6很有帮助哟
32 {
33 category.itemMap =
34 duce((itemMap,item)=>{
35 itemMap[item.name] = item;
36return itemMap
37 },{})
38 map[category.name] = category;
39return map
40 },
41 {}
42 )
43
All = function () {
45return data
46 }
47
48 exports.lookupCategory = function (name) {
49return dataMap[name]
50 }
51
52 exports.lookupItem = function (category, item) {
53return dataMap[category].itemsMap[item]
54 }
app.js
1 import React from 'react'
2 import { render } from 'react-dom'
3 import { browserHistory, Router, Route, Link } from 'react-router'
4
5 import withExampleBasename from '../withExampleBasename'
6 import data from './data'
7
8 import './app.css'
9
10 const category = ({children,params})=>{
11 const category = data.lookupCategory(params.category)
12
13return (
14 <div>
15 <h1>{category.name}</h1>
16 {children || (
17 <p>{category.description}</p>
18 )}
19 </div>
20 )
21 }
22
23 const CategorySidebar = ({ params }) => {
24 const category = data.lookupCategory(params.category)
25
26return (
27 <div>
28 <Link to="/">◀ Back</Link> // "/" 根⽬录到app组件 app包含什么往下看
29 <h2>{category.name} Items</h2>
30 <ul>
31 {category.items.map((item, index) => (
32 <li key={index}>
33 <Link to={`/category/${category.name}/${item.name}`}>{item.name}</Link> //见下⾯的route
34 </li>
35 ))}
36 </ul>
37 </div>
38 )
39 }
40
41 const Item = ({ params: { category, item } }) => {
42 const menuItem = data.lookupItem(category, item)
43
44return (
45 <div>
46 <h1>{menuItem.name}</h1>
47 <p>${menuItem.price}</p>
48 </div>
49 )
50 }
51
52 const Index = () => (
53 <div>
54 <h1>Sidebar</h1>
55 <p>
56 Routes can have multiple components, so that all portions of your UI
57 can participate in the routing.
58 </p>
59 </div>
60 )
61
62 const IndexSidebar = () => (
63 <div>
64 <h2>Categories</h2>
65 <ul>
66 {All().map((category, index) => (
67 <li key={index}>
68 <Link to={`/category/${category.name}`}>{category.name}</Link>
69 </li>
70 ))}
71 </ul>
72 </div>
73 )
74
75const App = ({ content, sidebar }) => (
76 <div>
77 <div className="Sidebar">
78 {sidebar || <IndexSidebar />}
79 </div>
80 <div className="Content">
81 {content || <Index />}
82 </div>
83 </div>
84 )
85
86 render((
87 <Router history={withExampleBasename(browserHistory, __dirname)}>
88 <Route path="/" component={App}>
89 <Route path="category/:category" components={{ content: Category, sidebar: CategorySidebar }}> // ⼀级
90 <Route path=":item" component={Item} /> //⼆级
91 </Route>
92 </Route>
93 </Router>
94 ), ElementById('example'))
95
看懂了吧很简单吧
我们再来看⼀个例⼦
1 import React from 'react'
2 import { render } from 'react-dom'
3 import { browserHistory, Router, Route, Link } from 'react-router'
4
5 import withExampleBasename from '../withExampleBasename'
6
7 const User = ({ params: { userID }, location: { query } }) => {
8 let age = query && query.showAge ? '33' : ''
9
10return (
11 <div className="User">
12 <h1>User id: {userID}</h1>
13 {age}
14 </div>
15 )
16 }
17
18 const App = ({ children }) => (
19 <div>
20 <ul>
21 <li><Link to="/user/bob" activeClassName="active">Bob</Link></li>
22 <li><Link to={{ pathname: '/user/bob', query: { showAge: true } }} activeClassName="active">Bob With Query Params</Link></li>
23 <li><Link to="/user/sally" activeClassName="active">Sally</Link></li>
24 </ul>
25 {children}
26 </div>
27 )
28
29 render((
30 <Router history={withExampleBasename(browserHistory, __dirname)}>
31 <Route path="/" component={App}>
32 <Route path="user/:userID" component={User} />
33 </Route>
34 </Router>
35 ), ElementById('example'))
简单吧到⾃信了吗。。。
最后看⼀个复杂⼀点的当做巩固吧
⼀个⼀个来
1 import React from 'react'
2 import { render } from 'react-dom'
3 import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
4
5 import withExampleBasename from '../withExampleBasename'
6
7 const PICTURES = [
8 { id: 0, src: 'placekitten/601/601' },
9 { id: 1, src: 'placekitten/610/610' },
10 { id: 2, src: 'placekitten/620/620' }
11 ]
12
13 const Modal = ateClass({
14 styles: {
15 position: 'fixed',
16 top: '20%',
17 right: '20%',
18 bottom: '20%',
19 left: '20%',
20 padding: 20,
21 boxShadow: '0px 0px 150px 130px rgba(0, 0, 0, 0.5)',
22 overflow: 'auto',
23 background: '#fff'
24 },
25
26 render() {
27return (
28 <div style={this.styles}>
29 <p><Link to={urnTo}>Back</Link></p> //这⾥是要返回当前属性的地址
30 {this.props.children}
31 </div>
32 )
33 }
34 })
1 const App = ateClass({
2
3 componentWillReceiveProps(nextProps) { //组件改变时就是路由切换时
4// if we
5if ((
6 nextProps.location.key !== this.props.location.key && //经过上⾯的讲解这⾥的location.key和state 懂吧
7 nextProps.location.state &&
8 nextProps.dal
9 )) {
10// save the old children (just like animation)
11this.previousChildren = this.props.children
12 }
13 },
14
15 render() {
16 let { location } = this.props
17
18 let isModal = (
19 location.state &&
20 dal &&
21this.previousChildren
22 )
23
24return (
25 <div>
26 <h1>Pinterest Style Routes</h1>
27
28 <div>
29 {isModal ?
30this.previousChildren :
31this.props.children
32 }
33
34 {isModal && (
35 <Modal isOpen={true} returnTo={urnTo}> // 这⾥是往回跳转
36{this.props.children} //⼤家要问this,props.children 是指的什么
37 </Modal>
38 )}
39 </div>
40 </div>
41 )
42 }
43 })
index-route 当app没有定义时被包含进去
1 const Index = ateClass({
2 render() {
3return (
4 <div>
5 <p>
6 The url `/pictures/:id` can be rendered anywhere in the app as a modal.
7 Simply put `modal: true` in the location descriptor of the `to` prop.
8 </p>
9
10 <p>
11 Click on an item and see its rendered as a modal, then copy/paste the
12 url into a different browser window (with a different session, like
13 Chrome -> Firefox), and see that the image does not render inside the
14 overlay. One URL, two session dependent screens :D
15 </p>
16
17 <div>
18 {PICTURES.map(picture => (
19 <Link
20 key={picture.id}
21 to={{
22 pathname: `/pictures/${picture.id}`,
23 state: { modal: true, returnTo: this.props.location.pathname }
24 }}
25 >
26 <img style={{ margin: 10 }} src={picture.src} height="100" />
27 </Link>
28 ))}
29 </div>
30
31 <p><Link to="/some/123/deep/456/route">Go to some deep route</Link></p>
32
33 </div>
34 )
35 }
36 })
⼤家如果还是不很懂可以看⼀下index－route 举个例⼦
1 import React from 'react'
2 import { render } from 'react-dom'
3 import { Router, Route, hashHistory, IndexRoute } from 'react-router'
4 import App from './modules/App'
5 import About from './modules/About'
6 import Repos from './modules/Repos'
7 import Repo from './modules/Repo'
8 import Home from './modules/Home'
9
10 render((
11 <Router history={hashHistory}>
12 <Route path="/" component={App}>
13 <IndexRoute component={Home}/>
14 <Route path="/repos" component={Repos}>
15 <Route path="/repos/:userName/:repoName" component={Repo}/>
16 </Route>
17 <Route path="/about" component={About}/>
18 </Route>
19 </Router>
20 ), ElementById('app'))
看下app.js
1 import React from 'react'
2 import NavLink from './NavLink'
3
4 export ateClass({
5 render() {
6return (
7 <div>
8 <h1>React Router Tutorial</h1>
9 <ul role="nav">
10 <li><NavLink to="/about">About</NavLink></li>
11 <li><NavLink to="/repos">Repos</NavLink></li>
12 </ul>
新版耐克react13 {this.props.children} //如果⼀开始访问根⽬录／其他的字组件还没包含进去那么。。。看下⾯
14 </div>
15 )
16 }
17 })
home.js
1 import React from 'react'
2
3 export ateClass({
4 render() {
5return <div>Home</div> //知道了吧刚才进去被包含进去的就是home组件当进⾏路由跳转的时候
6 }
7 })
navLink.js
1// modules/NavLink.js
2 import React from 'react'
3 import { Link } from 'react-router'
4
5 export ateClass({
6 render() {
7return <Link {...this.props} activeClassName="active"/>
8 }
9 })
repo.js
1 import React from 'react'
2
3 export ateClass({
4 render() {
5return (
6 <div>
7 <h2>{this.poName}</h2>
8 </div>
9 )
10 }
11 })
repos.js
1 import React from 'react'
2 import NavLink from './NavLink'
3
4 export ateClass({
5 render() {
6return (
7 <div>
8 <h2>Repos</h2>
9 <ul>
10 <li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
11 <li><NavLink to="/repos/facebook/react">React</NavLink></li>
12 </ul>
13{this.props.children} //repos肯定有⼦路由
14 </div>
15 )
16 }
17 })
⽆关紧要的about.js
1 import React from 'react'
2
3 export ateClass({
4 render() {
5return <div>About</div>
6 }
7 })
最重要的index.js
1 import React from 'react'
2 import { render } from 'react-dom'
3 import { Router, Route, hashHistory, IndexRoute } from 'react-router'
4 import App from './modules/App'
5 import About from './modules/About'
6 import Repos from './modules/Repos'
7 import Repo from './modules/Repo'
8 import Home from './modules/Home'
9
10 render((
11 <Router history={hashHistory}>
12 <Route path="/" component={App}>
13 <IndexRoute component={Home}/>
14 <Route path="/repos" component={Repos}>
15<Route path="/repos/:userName/:repoName" component={Repo}/>
16 </Route>
17 <Route path="/about" component={About}/>
18 </Route>
19 </Router>
20 ), ElementById('app'))
我们来整理⼀下
1.进⼊根⽬录/ 渲染app 下⾯有home 和 repos(下⾯⼜有repo)
2.根据指定路径到不同组件上⾯代码中，⽤户访问/repos时，会先加载App组件，然后在它的内部再加载Repos组件。
今天就这么多这些基础的东西还是很重要的话说我最近还真是忙呀
⼀个屁点⼤的公司，就我⼀个前端，还tm什么都要会，静态页⾯lz⼀个⼈些，还要做交互的特效，坑爹的事各种响应式，还⾮要什么flex布局。。。这还没完呀⽽且搞完了lz还要去⽤redux开发后台页⾯，现在⼩公司没⼀个不坑的，借⼝都是培养成全站式程序员，但⼜没实际的培训的技术指导，总监和pm什么的都在家遥控指挥，你觉得这不是笑话么。。。笑话归笑话，⼜要开始烧脑了
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论