React实现新闻网站--使用动态路由获取不同列表内容

import React,{Component} from ‘react‘;
import ReactDom from ‘react-dom‘;
import { Layout } from ‘antd‘;
import ‘antd/dist/antd.css‘;
import ‘./style.css‘;
import AppHeader from ‘./components/AppHeader/‘;
import {BrowserRouter,Route,Switch} from ‘react-router-dom‘;
import Detail from ‘./containers/Detail/‘;
import PageList from ‘./containers/List/‘;

const { Header, Footer, Content } = Layout;

class App extends Component{
    render(){
        return(
            

                            {/* /:id?代表参数可传可不传 */}
                                    )
    }
}

ReactDom.render(,document.getElementById(‘root‘));

import React,{Component,Fragment} from ‘react‘;
import logo from ‘./logo.png‘;
import ‘./style.css‘;
import { Menu } from ‘antd‘;
import axios from ‘axios‘;
import { Icon } from ‘@ant-design/compatible‘;
import {Link} from ‘react-router-dom‘;  

class AppHeader extends Component{
    constructor(props){
        super(props);
        this.state={
            list:[]
        }
    }

    componentDidMount(){
        axios.get("http://www.dell-lee.com/react/api/header.json")
        .then(res=>{
            console.log(res.data.data);
            this.setState({
                list:res.data.data
            })
        })
    }

    createMenuItem(){
        return this.state.list.map(item=>{
            return(              
                
                        {item.title}
                    
                            )
        })
    }

    render(){
        return(
            {this.createMenuItem()}        )
    }
}

export default AppHeader;

import React,{Component} from ‘react‘;
import { List, Typography } from ‘antd‘;
import axios from ‘axios‘;
 
class PageList extends Component{
    constructor(props){
        super(props);
        this.state={
            data:[]
        }
    }

    componentWillReceiveProps(nextProps){
        const id=nextProps.match.params.id;
        axios.get("http://www.dell-lee.com/react/api/list.json?id="+id)
        .then(res=>{
            this.setState({
                data:res.data.data
            })
        })       
    }

    componentDidMount(){
        let url="http://www.dell-lee.com/react/api/list.json";
        const id=this.props.match.params.id;
        if(id){
            url=url+"?id="+id;
        }
        axios.get("http://www.dell-lee.com/react/api/list.json?id="+id)
        .then(res=>{
            this.setState({
                data:res.data.data
            })
        })
    }

    render(){
        return(
            List
                style={{background:‘#fff‘}}
                bordered
                dataSource={this.state.data}
                renderItem={item => (
                    [ITEM] {item.title}
                                    )}
                />
        )
    }
}

export default PageList;