React的前端路由

路由指的是根据网址访问的url的不同，代码能展示出来不同的页面内容
前端路由：根据用户访问路径的不同，展示不同的内容，在react中路由指的是根据用户路径的不同，给用户展示不同的组件。
安装路由： npm install react-router-dom --save
安装完成需要引入三个不同的组件import { BrowserRouter,Route,Link} from 'react-router-dom';
BrowserRouter：创建一个路由，内部只能有一个元素，一般可以用< div> < /div>包裹起来。
Route： 配置的是每个路由项，指的是访问不同的路径，要显示什么样的组件。
在react中，不能简单的通过a标签进行路由的跳转
Link：组件之间的跳转，import { Link } from 'react-router-dom';可以通过< Link to=’’>< /Link>。
在页面跳转的时候，可以携带一些参数，包括？a=123这类的，但在解析的时候比较麻烦。可以通过/路径的形式携带参数，但需要在路由配置的时候，在后面加入：id，例如<Route path='/list/:id' component={newList}/>，而使用它的时候可以用this.props.params.id来使用
案例：
index.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter,Route,Link} from 'react-router-dom';
import newList from './newList';
import newButton from './newButton';
import 'antd/dist/antd.css'; 

class Entry extends Component{
    render(){
        return (
            <BrowserRouter>
                <div>
                    {/* 如果后面有任何123的参数，可以放到id这个变量当中去 */}
                    <Route path='/list/:id' component={newList}/>
                    <Route path='/button' component={newButton}/>
                </div>
               
            </BrowserRouter>
        )
    }
}
ReactDOM.render(<Entry />,document.getElementById('root'));

newList.js

import React, { Component } from 'react';
// import axios from 'axios';
import { List, Typography } from 'antd';

const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
  ];
//在React中，生命周期函数指的是组件在某一时刻会自动执行的函数
//当数据发生变化时，render函数会被自动执行，他就是一个react生命周期函数
class newList extends Component{
    // handleClick(){
    //     console.log('window click');
    // }
    // componentWillMount(){
    //     window.addEventListener('click',this.handleClick);
    // }
    render(){
        console.log(this.props.match.params.id);
        return(
            <List
                style={{
                    marginLeft:20,
                    marginTop:20,
                    marginRight:20
                }}
                header={<div>Header</div>}
                footer={<div>Footer</div>}
                bordered
                dataSource={data}
                renderItem={item => (<List.Item>{item}</List.Item>)}
            />
            
        )
    }
    //最合适发送ajax的地方
    // componentDidMount(){
    //     //promise可以理解为存的是ajax的过程
    //     const promise=axios.get('http://www.dell-lee.com/react/api/demo.json');
    //     //如果过程成功了,可以拿到res，也就是请求的结果
    //     promise.then((res)=>{
    //         //获取远程数据
    //         console.log(res.data);
    //     })
            
    // }
    // componentWillUnmount(){
    //     window.removeEventListener('click',this.handleClick)
    // }
}
export default newList;

newButton.js

import React, { Component } from 'react';
import { Button } from 'antd';
import { Link } from 'react-router-dom';

class newButton extends Component{
   
    render(){
        return(
           <Link to='/list/123'>
                <Button type='primary'>按钮</Button>
           </Link>
            
        )
    }
   
}
export default newButton;