react 路由案例

首先，先做底部的导航在页面写入

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import Home from './pages/home'
import TabBar from '@@/TabBar' //引入组件
import './index.less'

const Cart = () => <h1>Cart</h1>
const User = () => <h1>User</h1>
const All = () => <h1>All</h1>

ReactDOM.render(
  <BrowserRouter>
    <Switch> 
      <Route path="/cart" component={Cart} />
      <Route path="/user" component={User} />
      <Route path="/All" component={All} />
      <Route path="/" component={Home} />
    </Switch>
    <TabBar />    //我把这个东西封装成一个组件了。放在了components里了
  </BrowserRouter>,
  document.getElementById('root')
)

　　

然后在封装的TabBar写入

import React from 'react'
import { Icon } from 'antd'
import { NavLink } from 'react-router-dom'
import './styles.less'

const IconFont = Icon.createFromIconfontCN({    //使用了antd的icon 我用的阿里的图标库
  scriptUrl: '//at.alicdn.com/t/font_249460_ozbfr66yg1k.js', //这个路径是你自己的图标库里的路径
})

export default class Home extends React.Component {
  render () {
    return (
      <div className="common-tabbar">
        <ul>
          <li>
            <NavLink to="/home/detail">    //达到默认样式，这边就不需要用exact
              <IconFont type="icon-restore" className="icon" />
              首页
            </NavLink>
          </li>
          <li>
            <NavLink to="/all" exact>    //exact 精确匹配
              <IconFont type="icon-add" className="icon" /> 
              全部分类
            </NavLink>
          </li>
          <li>
            <NavLink to="/cart" exact>
              <IconFont type="icon-all" className="icon" />
              购物车
            </NavLink>
          </li>
          <li>
            <NavLink to="/user" exact>
              <IconFont type="icon-Category" className="icon" /> 
              个人中心
            </NavLink>
          </li>
        </ul>
      </div>
    )
  }
}

　　

然后再首页的文件里写入

import React, { Component } from 'react'
import Axios from 'axios'
import {
  Route,
  NavLink,
  Switch,
  Redirect
} from "react-router-dom";
import Detail from '@/pages/detail'    //引入右边板块的页面
import './styles.less'

export default class All extends Component {

  state = {
    data: []
  }

  componentDidMount() {
    Axios.get('http://vueshop.glbuys.com/api/home/category/menu?token=1ec949a15fb709370f').then(res => {   //这里是我自己的一个接口的数据
      this.setState({
        data: res.data.data
      })
    })
  }

  render() {
    return (
      <div className='page-home'>
        <ul className="page-side">
          {
            this.state.data.map(item => {
              return (
                <li key={item.cid}>
                  <NavLink to={`/home/detail/${item.cid}`} >{item.title}</NavLink>
                </li>
              )
            })
          }
        </ul>

        <div className="page-main">
          <Switch>
            {/* 这边使用动态路由方式进行传参 */}
            <Route path='/home/detail/:id' component={Detail}></Route>
            <Redirect to='/home/detail/492' exact/>    //让他重定向到第一个页面的第一条数据
          </Switch>
        </div>
      </div>
    )
  }
}

　　

详情页面写入， 因为自己的接口么。 不可能有那么多数据， 所以render时候进行了判断，解决报错问题。

import React, { Component } from 'react'
import Axios from 'axios'
import './styles.less'
export default class Detail extends Component {

    state = {
        data: []
    }

    componentDidMount(){
        Axios.get(`http://vueshop.glbuys.com/api/home/category/show?cid=${this.props.match.params.id}&token=1ec949a15fb709370f`).then(res=>{
            if( res.data.code == 200 ){
                this.setState({
                    data: res.data.data
                })
            } 
           
        })
    }

    componentWillReceiveProps(nextProps){
        Axios.get(`http://vueshop.glbuys.com/api/home/category/show?cid=${nextProps.match.params.id}&token=1ec949a15fb709370f`).then(res=>{
            if( res.data.code == 200 ){
                this.setState({
                    data: res.data.data
                })
            }
        })
    }

    render() {
        const { data = [] } = this.state //这里定义一个默认值， 如果data这个数据为undefined时候就会走默认值
        return (
            <>
                {   //这里再运用了一个三目，是因为后台给的数据有错误， 给了一个null， null不会走默认值，所以使用三目
                   data!== null && data ? data.map( item=>{
                        return(
                            <div className='main' key={item.cid}>
                                <h1>{item.title}</h1>
                                <div className='list'>
                                {
                                    item.goods!== null && item.goods ? item.goods.map( v =>{
                                        return(
                                            <dl key={v.gid}>
                                                <dt><p><img src={v.image} /></p></dt>
                                                <dd>{v.title}</dd>
                                            </dl>
                                        )
                                    }) :<div>没有数据</div>
                                }
                                </div>
                            </div>
                        )
                    })  : <div>没有数据</div>
                }
            </>
        )
    }
}