Shulou(Shulou.com)06/02 Report--

How to understand react routing Link configuration, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

1. To attribute of Link

(1) place the routing path

(2) place the object in the prescribed format

{pathname: "/ xx", search:'? Key value pair', hash: "# xxx", state: {key value pair}}

Pathname, search, and hash are automatically stitched on the url path, with state as the passed parameter

You can view the information within an object by outputting props

This.props.location.state. Key name to get the data in the state

2. Replace attribute of Link

Add replace to replace the previous page before the jump with the current page, and only put the current page on the stack

3. Transfer parameters by Link

Add "/ key value" after the to path

Add "/: key name" after routing the route,path path

In the component, the functional component: pass in the props parameter first, and then props.match.params. Key name

Class component: this.props.match.params. Key name

Code example: import React, {Component} from 'react'//import {Route,BrowserRouter,Link} from' react-router-dom'// rename BrowserRouter to Routerimport {BrowserRouter as Router,Link,Route} from 'react-router-dom'import {Button} from' antd';import'. / App.css' Function Home () {return (admin homepage)} function Me (props) {console.log (props) return (admin my)} function Product (props) {return (admin product page: {props.match.params.id})} export default class App extends Component {constructor () {super () } render () {{/ * if the path is written as an object and is the same as below, pathname, search and hash will be automatically spliced on the url path. State is the data of the incoming component * /} let obj= {pathname: "/ me", search:'?username=admin',hash: "# abc" State: {msg:'hello'}} return ({/ * BrowserRouter can put multiple * /} {/ * because the component also returns html content, you can directly return html content through the function as a component However, you cannot directly write html content * /} homepage} > product} > me} > {/ * * /} {/ * there can only be one root container inside BrowserRouter. Wrap other content * /} {/ * after adding basename='/xx', click Link to jump to other routes. Url adds / xx to the route name, so both the route path and the route path with admin match the route * /} Home Product {/ * you can output props in the corresponding component to view the information of the incoming object Add replace to replace the previous page before the jump with the current page, and only put the current page into the stack * /} personal center)}} is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.