React笔记10——React 中的前端路由

路由：根据访问的网址url的不同，代码能展示出不同的内容。

React 中的前端路由：根据访问的网址url的不同，React会展示出不同的组件。

React中默认是没有路由的，需要自己来安装一下。

安装路由模块：npm install react-router-dom --save

引入BrowserRouter、Route和Link组件：import { BrowserRouter,Route,Link } from 'react-router-dom';

BrowserRouter：定义一个路由，包含一条条的路由Route，只允许包含一个路由标签，如果有多个，要将多个路由标签放到一个标签中包起来（一般使用div）

Route：路由项。path属性（路径）、component属性（要显示的组件，需要使用import引入该组件）

Link：用于路由跳转（比如点击button页中的button按钮，跳转到list路径中）。需要引入Link标签模块，将想产生跳转的组件包到Link标签中，通过to属性指定跳转到的路径。

例子：进入list路径显示List组件，进入button路径显示Button组件。

思考：如果想在页面跳转时，传递一些参数应该怎么做呢？

1⃣️在路径中带参数：/list?a=123

list页面如何获取到参数？

在render函数中的this.props.loaction.search中可以看到参数：?a=123

但是这种方法需要自己手动提取出具体的参数值。

2⃣️在路径中带参数：/list/123

这样不能直接获取到参数值，需要配置一下路由项中的path属性：路径修改为/list/:id

可以在render函数中通过this.props.match.params.id来获取到参数值。

代码：

index.js

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter, Route } 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>
					<Route path='/list/:id' component={NewList}/>
					<Route path='/button' component={NewButton}/>
				</div>
			</BrowserRouter>
		)
	}

}

ReactDom.render(<Entry />, document.getElementById('root'));

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;

newList.js

import React, { Component } from 'react';
import { List } 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.',
];

class NewList extends Component {

	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>)}
	    />
		)
	}

}

export default NewList;