路由指的是根据网址访问的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;