React Notes 10 - front end of the route React

Route: Depending on the web site url access, the code can exhibit different content.

The front-end routing React: Depending URL url visit, React will exhibit different components.

React is no default route, you need to install it yourself.

Installation routing module: NPM Router-DOM-REACT the install --save

Introducing BrowserRouter, Route Link and components: Import {BrowserRouter, Route, Link} from 'REACT-Router-DOM';

BrowserRouter: define a route, the route Route comprises a strip, comprising a routing label only if there are multiple, to a plurality of routing label into label wrap (general use div)

Route: Route entries. path property (path), Component Properties (components to be displayed, is introduced into the assembly requires the use of import)

Link: for routing Jump (such as clicking button button button page, jump to the list path). Link tag module needs to be introduced, you will want to produce a jump component package Link label, designated to jump to the path through the property.

Examples: enter the route display list List component, into the path display button Button assembly.

Thoughts: If you want the page jump pass some parameters should be how to do it?

1⃣️ with parameters in the path: / List A = 123?

How to get to the parameter list page?

In the render function of this.props.loaction.search can see the parameters: ? A = 123

However, this method requires to extract their specific parameter values ​​manually.

2⃣️ parameters in the path: / List / 123

This does not contact to the parameter values need to configure the attribute of the route entry in the path: the path modify / List /: ID

You can render the function this.props.match.params.id be acquired parameter values.

Code:

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;