react路由案例(非常適合入門)

前面已經已經講過一次路由   稍微有些復雜   考慮到有些同學剛接觸到   我准備了一個簡單的demo   就當自己也順便復習一下

data.js

const data = [
  {
    name: 'Tacos',
    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 cheese, allowing for great versatility and variety. A taco is generally eaten without utensils and is often accompanied by garnishes such as salsa, avocado or guacamole, cilantro (coriander), tomatoes, minced meat, onions and lettuce.',
    items: [
      { name: 'Carne Asada', price: 7 },
      { name: 'Pollo', price: 6 },
      { name: 'Carnitas', price: 6 }
    ]
  },
  {
    name: 'Burgers',
    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 with lettuce, bacon, tomato, onion, pickles, cheese and condiments such as mustard, mayonnaise, ketchup, relish, and green chile.',
    items: [
      { name: 'Buffalo Bleu', price: 8 },
      { name: 'Bacon', price: 8 },
      { name: 'Mushroom and Swiss', price: 6 }
    ]
  },
  {
    name: 'Drinks',
    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, have some form of water in them, water itself is often not classified as a beverage, and the word beverage has been recurrently defined as not referring to water.',
    items: [
      { name: 'Lemonade', price: 3 },
      { name: 'Root Beer', price: 4 },
      { name: 'Iron Port', price: 5 }
    ]
  }
]

const dataMap = data.reduce((map,category) =>   //重點看這里 在干嘛 對es6很有幫助喲
  {   
       category.itemMap =              
       category.items.reduce((itemMap,item)=>{
       itemMap[item.name] = item;
       return itemMap
},{})
       map[category.name] = category;
       return map
      },
    {}
)

exports.getAll = function () {
  return data
}

exports.lookupCategory = function (name) {
  return dataMap[name]
}

exports.lookupItem = function (category, item) {
  return dataMap[category].itemsMap[item]
}

app.js

import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Route, Link } from 'react-router'

import withExampleBasename from '../withExampleBasename'
import data from './data'

import './app.css'

const category = ({children,params})=>{
        const category = data.lookupCategory(params.category)

  return (
    <div>
      <h1>{category.name}</h1>
      {children || (
        <p>{category.description}</p>
      )}
    </div>
  )
}

const CategorySidebar = ({ params }) => {
  const category = data.lookupCategory(params.category)

  return (
    <div>
      <Link to="/">◀︎ Back</Link>   // "/" 根目錄 到app組件 app包含什么 往下看
      <h2>{category.name} Items</h2>
      <ul>
        {category.items.map((item, index) => (
          <li key={index}>
            <Link to={`/category/${category.name}/${item.name}`}>{item.name}</Link>   //見下面的route 
          </li>
        ))}
      </ul>
    </div>
  )
}

const Item = ({ params: { category, item } }) => {
  const menuItem = data.lookupItem(category, item)

  return (
    <div>
      <h1>{menuItem.name}</h1>
      <p>${menuItem.price}</p>
    </div>
  )
}

const Index = () => (
  <div>
    <h1>Sidebar</h1>
    <p>
      Routes can have multiple components, so that all portions of your UI
      can participate in the routing.
    </p>
  </div>
)

const IndexSidebar = () => (
  <div>
    <h2>Categories</h2>
    <ul>
      {data.getAll().map((category, index) => (
        <li key={index}>
          <Link to={`/category/${category.name}`}>{category.name}</Link>
        </li>
      ))}
    </ul>
  </div>
)

const App = ({ content, sidebar }) => (
  <div>
    <div className="Sidebar">
      {sidebar || <IndexSidebar />}
    </div>
    <div className="Content">
      {content || <Index />}
    </div>
  </div>
)

render((
  <Router history={withExampleBasename(browserHistory, __dirname)}>
    <Route path="/" component={App}>
      <Route path="category/:category" components={{ content: Category, sidebar: CategorySidebar }}> // 一級
        <Route path=":item" component={Item} />  //二級
      </Route>
    </Route>
  </Router>
), document.getElementById('example'))
 

看懂了吧  很簡單吧 

我們再來看一個例子

import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Route, Link } from 'react-router'

import withExampleBasename from '../withExampleBasename'

const User = ({ params: { userID }, location: { query } }) => {
  let age = query && query.showAge ? '33' : ''

  return (
    <div className="User">
      <h1>User id: {userID}</h1>
      {age}
    </div>
  )
}

const App = ({ children }) => (
  <div>
    <ul>
      <li><Link to="/user/bob" activeClassName="active">Bob</Link></li>
      <li><Link to={{ pathname: '/user/bob', query: { showAge: true } }} activeClassName="active">Bob With Query Params</Link></li>
      <li><Link to="/user/sally" activeClassName="active">Sally</Link></li>
    </ul>
    {children}
  </div>
)

render((
  <Router history={withExampleBasename(browserHistory, __dirname)}>
    <Route path="/" component={App}>
      <Route path="user/:userID" component={User} />
    </Route>   
  </Router>
), document.getElementById('example'))

簡單吧 找到自信了嗎 。。。

最后看一個復雜一點的   當做鞏固吧

一個一個來

import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'

import withExampleBasename from '../withExampleBasename'

const PICTURES = [
  { id: 0, src: 'http://placekitten.com/601/601' },
  { id: 1, src: 'http://placekitten.com/610/610' },
  { id: 2, src: 'http://placekitten.com/620/620' }
]

const Modal = React.createClass({
  styles: {
    position: 'fixed',
    top: '20%',
    right: '20%',
    bottom: '20%',
    left: '20%',
    padding: 20,
    boxShadow: '0px 0px 150px 130px rgba(0, 0, 0, 0.5)',
    overflow: 'auto',
    background: '#fff'
  },

  render() {
    return (
      <div style={this.styles}>
        <p><Link to={this.props.returnTo}>Back</Link></p> //這里是要返回當前屬性的地址
        {this.props.children}
      </div>
    )
  }
})

const App = React.createClass({

  componentWillReceiveProps(nextProps) {  //組件改變時 就是路由切換時  4     // if we changed routes...
    if ((
      nextProps.location.key !== this.props.location.key &&   //經過上面的講解這里的location.key和state 懂吧
      nextProps.location.state &&
      nextProps.location.state.modal       
    )) {
      // save the old children (just like animation)
      this.previousChildren = this.props.children
    }
  },

  render() {
    let { location } = this.props

    let isModal = (
      location.state &&
      location.state.modal &&
      this.previousChildren
    )

    return (
      <div>
        <h1>Pinterest Style Routes</h1>

        <div>
          {isModal ?
            this.previousChildren :
            this.props.children
          }

          {isModal && (
            <Modal isOpen={true} returnTo={location.state.returnTo}>   // 這里是往回跳轉
              {this.props.children} //大家要問this,props.children 是指的什么 37             </Modal>
          )}
        </div>
      </div>
    )
  }
})

index-route  當app沒有定義時  被包含進去

const Index = React.createClass({
  render() {
    return (
      <div>
        <p>
          The url `/pictures/:id` can be rendered anywhere in the app as a modal.
          Simply put `modal: true` in the location descriptor of the `to` prop.
        </p>

        <p>
          Click on an item and see its rendered as a modal, then copy/paste the
          url into a different browser window (with a different session, like
          Chrome -> Firefox), and see that the image does not render inside the
          overlay. One URL, two session dependent screens :D
        </p>

        <div>
          {PICTURES.map(picture => (
            <Link
              key={picture.id}
              to={{
                pathname: `/pictures/${picture.id}`,
                state: { modal: true, returnTo: this.props.location.pathname }
              }}
            >
              <img style={{ margin: 10 }} src={picture.src} height="100" />
            </Link>
          ))}
        </div>

        <p><Link to="/some/123/deep/456/route">Go to some deep route</Link></p>

      </div>
    )
  }
})

 大家如果還是不很懂   可以看一下index－route  舉個例子

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
import Repo from './modules/Repo'
import Home from './modules/Home'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="/repos" component={Repos}>
        <Route path="/repos/:userName/:repoName" component={Repo}/>
      </Route>
      <Route path="/about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

看下app.js

import React from 'react'
import NavLink from './NavLink'

export default React.createClass({
  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/repos">Repos</NavLink></li>
        </ul>
        {this.props.children}   //如果一開始訪問 根目錄／ 其他的字組件還沒包含進去 那么。。。 看下面 14       </div>
    )
  }
})

home.js

import React from 'react'

export default React.createClass({
  render() {
    return <div>Home</div>  //知道了吧 剛才進去 被包含進去的就是home組件 當進行路由跳轉的時候
  }
})

 navLink.js

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return <Link {...this.props} activeClassName="active"/>  
  }
})

repo.js

import React from 'react'

export default React.createClass({
  render() {
    return (
      <div>
        <h2>{this.props.params.repoName}</h2>  
      </div>
    )
  }
})

repos.js

import React from 'react'
import NavLink from './NavLink'

export default React.createClass({
  render() {
    return (
      <div>
        <h2>Repos</h2>
        <ul>
          <li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
          <li><NavLink to="/repos/facebook/react">React</NavLink></li>
        </ul>
        {this.props.children} //repos肯定有子路由 14       </div>
    )
  }
})

無關緊要的about.js

import React from 'react'

export default React.createClass({
  render() {
    return <div>About</div>
  }
})

最重要的index.js

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
import Repo from './modules/Repo'
import Home from './modules/Home'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="/repos" component={Repos}>
        <Route path="/repos/:userName/:repoName" component={Repo}/>
      </Route>
      <Route path="/about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

我們來整理一下 

1.進入根目錄/  渲染app  下面有home  和  repos(下面又有repo)

2.根據指定路徑到不同組件 上面代碼中，用戶訪問/repos時，會先加載App組件，然后在它的內部再加載Repos組件。

今天就這么多  這些基礎的東西還是很重要的   話說我最近還真是忙呀

一個屁點大的公司，就我一個前端，還tm什么都要會，靜態頁面lz一個人些，還要做交互的特效，坑爹的事各種響應式，還非要什么flex布局。。。這還沒完呀

而且搞完了lz還要去用redux開發后台頁面，現在小公司沒一個不坑的，借口都是培養成全站式程序員，但又沒實際的培訓的技術指導，總監和pm什么的都在家

遙控指揮，你覺得這不是笑話么。。。笑話歸笑話，又要開始燒腦了