一、摘要

1.登录跳转-js跳转路由

2.路由系统
	列表页详情页，获取动态路由传值

3.数据获取
	axios

4.数据展示：
	img, html,
  

二、详情

1.App.js-配路由

import './assets/css/App.css';
import './assets/css/index.css'
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
// 引入组件
import Home from './components/Home'
import Pcontent from './components/Pcontent'
import Login from './components/Login'
function App() {
    return (
        <div className="App">
            <Router>
                <Route exact path="/" component={Home} />
                <Route exact path="/home" component={Home} />
                <Route path="/pcontent/:id" component={Pcontent} />
                <Route path="/login" component={Login} />
            </Router>
        </div>
    );
}
export default App;

2.登录页-js路由跳转

/*
1.引入Redirect
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom";

2.定义一个flag

3.render里面判断

4.执行js跳转
    通过js改变loginFlag的状态，然后重走render
*/
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom";
import '../assets/css/index.css'
class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loginFlag: false
        }
    }

    login = () => {
        this.setState({loginFlag:true})
    }

    render() {
        if(this.state.loginFlag){
            return(
                <Redirect to='/home' />
                // <Redirect to={{pathname: '/home'}} />
            )
        }
        return (
            <div className='login-page'>
                <h1 className='tit'>登录页面</h1>
                <button className='btn' onClick={this.login}>登录</button>
            </div>
        )
    }
}
export default Login;

3. 列表页

import React from 'react';
import axios from 'axios';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom";

import '../assets/css/index.css'
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            domain: 'http://a.itying.com/',
            linkFlag: false
        }
    }

    requestData=()=>{
        let api = this.state.domain+'api/productlist';
        axios.get(api)
            .then((res) => {
                let list = res.data.result;
                this.setState({list: list});
                console.log(list);
            })
            .catch((error) => {
                console.log(error);
            })
    }

    quit=()=>{
        this.setState({linkFlag:true})
    }

    componentDidMount() {
        this.requestData();
    }

    render() {
        if(this.state.linkFlag){
            return(
                <Redirect to={{pathname:'/login'}} />
            )
        }
        return (
            <div className='page'>
                <button onClick={this.quit}>退出登录</button>
                <h1>列表页</h1>
                <div className='content'>
                    {
                        this.state.list.map((item, key)=>{
                            return(
                                <div key={key} className="mod">
                                    <div className="modtit">{item.title}</div>
                                    <div className='modList'>
                                        {
                                            item.list.map((yitem, ykey)=>{
                                                return(
                                                    <div key={ykey} className='itemwrap'>
                                                        <Link to={`/pcontent/${yitem._id}`} className='item'>
                                                            <div className='timg'> 
                                                                <img src={`${this.state.domain}${yitem.img_url}`} alt=""/>
                                                            </div>
                                                            <div className='bot'>
                                                                <div>{yitem.title}</div>
                                                                <div className='price'>{yitem.price}元</div>
                                                            </div>
                                                        </Link>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}
export default Home;

4.详情页

import React from 'react';
import axios from 'axios';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
class Pcontent extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            back: '<',
            data:{},
            domain: 'http://a.itying.com/'
        }
    }

    getData=(id)=>{
        let api = this.state.domain+'api/productcontent?id='+id;
        axios.get(api)
            .then((res) => {
                let data = res.data.result[0];
                console.log('res: ', data);
                this.setState({data: data});
            })
            .catch((error) => {
                console.log(error);
            })
    }

    componentDidMount(){
        let id = this.props.match.params.id;
        this.getData(id);
        console.log('id: ', id);
    }

    render(){
        return(
            <div className="pcon-page">
                <Link to="/" className="back">{this.state.back}</Link>
                <div className='bigimg'>
                    {this.state.data.img_url?<img src={`${this.state.domain}${this.state.data.img_url}`} alt=""/>:''}
                </div>
                <div className='subtit'>
                    <p>{this.state.data.title}</p>
                </div>
                <div className="pconCon" dangerouslySetInnerHTML={{__html:this.state.data.content}}></div>
            </div>
        )
    }
}
export default Pcontent;