React学习之旅----项目小实例----无人点餐二---js控制路由跳转

/*

实现js跳转路由：https://reacttraining.com/react-router/web/example/auth-workflow

1、要引入Redirect

    import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect,
    withRouter
    } from "react-router-dom";

2、定义一个flag
        this.state = { 
                loginFlag:false            
        };

3、render里面判断flag 来决定是否跳转

        if(this.state.loginFlag){

            return <Redirect to={{ pathname: "/" }} />;
        }

4、要执行js跳转

        通过js改变loginFlag的状态

        改变以后从新render 就可以通过Redirect自己来跳转


*/

import React, { Component } from 'react';

import {Redirect} from "react-router-dom";


class Login extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            loginFlag:false            
        };
    }

    doLogin=(e)=>{

        e.preventDefault();
        

        let username=this.refs.username.value;

        let password=this.refs.password.value;


        console.log(username,password)

        if(username==='admin' && password==='123456'){

            //登录成功   跳转到首页

            this.setState({

                loginFlag:true
            })



        }else{

            alert('登录失败')
        }

    }
    render() {


        if(this.state.loginFlag){

            // return <Redirect to={{ pathname: "/" }} />;

            return <Redirect to='/' />;
        }
        return (    


            <div>
                 <br /> <br /> <br />

                <form onSubmit={this.doLogin}>

                        <input type="text"  ref="username" />  <br /> <br />

                        <input type="password"  ref="password" /> <br /> <br />

                         <input type="submit"  value="执行登录"/>

                </form>

               

            </div>
            
        );
    }
}

export default Login;

import React from 'react'
import { Link } from "react-router-dom";
const axios = require('axios');
class Pcontent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '产品详情',
      list: {},
      domain: 'http://a.itying.com/'
    };
  }
  requestData (id) {
    var api = this.state.domain + 'api/productcontent?id=' + id;
    axios.get(api)
      .then((response) => {
        console.log(response.data.result);
        console.log(response.data.result[0])
        this.setState({
          
          list: response.data.result[0]
        })
      })
      .catch(function (error) {
        console.log(error);
      })
  }
  componentDidMount () {
    console.log(this.props.match.params.id)
    let id = this.props.match.params.id;
    this.requestData(id);
  }
  render () {
    return (
      <div className="pcontent">
        <div className="back">  <Link to='/'>返回</Link></div>
        <div className="p_content">
          <div className="p_info">
          {/* 当渲染图片数据时，可能请求的数据没加载完，导致会报一次404错误 */}
            {this.state.list.img_url?<img src={`${this.state.domain}${this.state.list.img_url}`} alt={this.state.list.title}/>:''}
            <h2>{this.state.list.title}</h2>
            <p className="price">{this.state.list.price}/份</p>
          </div>
          <div className="p_detial">
            <h3>
              商品详情
              </h3>
              {/* 这是react解析Html代码的方式dangerouslySetInnerHTML */}
            <div className="p_content" dangerouslySetInnerHTML={{ __html: this.state.list.content }}>
            </div>
          </div>
        </div>
        <footer className="pfooter">
          <div className="cart">
            <strong>数量:</strong>
            <div className="cart_num">
              <div className="input_left">-</div>
              <div className="input_center">
                <input type="text" readOnly="readonly" value="1" name="num" id="num" />
              </div>
              <div className="input_right">+</div>
            </div>
          </div>
          <button className="addcart">加入购物车</button>
        </footer>
      </div>
    );
  }
}

export default Pcontent;

import React from 'react'
import axios from 'axios'
import { Link } from "react-router-dom"
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '首页',
      list: [],
      domain: 'http://a.itying.com/'
    };
  }
  requestData = () => {
    var api = this.state.domain + 'api/productlist';
    axios.get(api)
      .then((response) => {
        console.log(response.data.result)
        this.setState({
          list: response.data.result

        })
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  componentDidMount () {
    this.requestData()
  }
  render () {
    return (
      <div className="home">
        <button>  <Link to='/login'>跳转到登录页面</Link></button>
        <div className="list">
          {
            this.state.list.map((value, key) => {
              return (
                <div className="item" key={key}>
                  <h3 className="item_cate">{value.title}</h3>
                  <ul className="item_list">
                    {
                      value.list.map((v, k) => {
                        return (
                          <li key={k}>
                            <Link to={`/pcontent/${v._id}`}>
                              <div className="inner">
                                {/* <img src={require('../assets/images/2.jpg')} /> */}
                                <img src={`${this.state.domain}${v.img_url}`} alt={v.title} />
                                <p className="title">{v.title}</p>
                                <p className="price">{v.price}元</p>
                              </div>
                            </Link>
                          </li>
                        )
                      })
                    }
                  </ul>
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }
}

export default Home

/*
  react路由的配置：
    1、找到官方文档 https://reacttraining.com/react-router/web/example/basic
    2、安装  cnpm install react-router-dom --save
    3、找到项目的根组件引入react-router-dom
       import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    4、复制官网文档根组件里面的内容进行修改  （加载的组件要提前引入）
         <Router>
                <Link to="/">首页</Link>
                <Link to="/news">新闻</Link>
                <Link to="/product">商品</Link>
               <Route exact path="/" component={Home} />
               <Route path="/news" component={News} />    
               <Route path="/product" component={Product} />   
         </Router>
         exact表示严格匹配  
react动态路由传值
1、动态路由配置
<Route path="/content/:aid" component={Content} />   
2、对应的动态路由加载的组件里面获取传值
this.props.match.params
跳转：<Link to={`/content/${value.aid}`}>{value.title}</Link>
react get传值  
1、获取 this.props.location.search       
*/
import React, { Component } from 'react';
// import logo from './logo.svg';
// import './App.css';
import './assets/css/index.css'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from './components/Home'
// import News from './components/News'
// import Product from './components/Product'
// import Content from './components/Content'
// import ProductContent from './components/ProductContent'
import Pcontent from './components/Pcontent'
import Login from './components/Login';
class App extends Component {
  render () {
    return (
      <Router>
        <div>
          {/* link路由跳转 */}
          <Link to="/">首页</Link>
          {/* <Link to="/news">新闻</Link> */}
          {/* <Link to="/product">商品</Link> */}
          <Link to="/pcontent">商品</Link>
          {/* <Link to="/productcontent">商品详情</Link> */}
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
          {/* <Route path="/news" component={News} /> */}
          {/* <Route path="/product" component={Product} /> */}
          <Route path="/pcontent/:id" component={Pcontent} />
          {/* <Route path="/productcontent" component={ProductContent} /> */}
          {/* 配置动态路由 */}
          {/* <Route path="/content/:aid" component={Content} /> */}
        </div>
      </Router >
    )
  }
}
export default App;