Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use the front-end routing in React". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the front-end routing in React.

one。 What is url?

Visit different url to show different components

two。 Use steps

Install React routing: execute npm install react-router-dom-save on the command line (note that the version here is npm install react-router-dom@4.3.1-save)

The two js files, list.js and newButton.js, display button.js; when you want to access localhost:3000/button and list.js when you access localhost:3000/list. The code is as follows:

List.js

Import React, {Component} from "react"; import {List} from 'antd';const data = [' aaa', 'bbb',' ccc', 'ddd'] class List extends Component {render () {return (({item})} / >)} export default List

NewButton.js

Import React, {Component} from "react"; import {List} from 'antd';const data = [' aaa', 'bbb',' ccc', 'ddd'] class NewList extends Component {render () {return (({item})} / >)} export default NewList

Using router in index.js

1) introduce routing: import {BrowserRouter, Route, Link} from 'react-router-dom'

2) render the BrowserRouter component, which contains one route after another

Class Entry extends Component {render () {return ()}}

3) after entering localhost:3000 in the browser, what is not displayed, because there is no matching route at this time

4) according to the routing configuration, enter: localhost:3000/list in the browser and the newList component will be displayed.

Enter: localhost:3000/button to display the newButton component

Note: BrowserRoute means to define a route, and Route means a route entry.

5) if you want to jump to the list page by clicking the button in newButton, you need to use Link (after using React routing, you cannot use a tag to jump to the page, you need to use the Link tag to complete the jump)

Step: jump with Link tag after introducing Link into newButton

NewButton.js

Import React, {Component, Fragment} from "react"; import {Link} from "react-router-dom"; import {Button} from 'antd';class NewButton extends Component {render () {return (button)} export default NewButton

6) carry the parameters when you jump to the page, and how to obtain the parameters, such as

Class NewButton extends Component {render () {return}}

Solution: in the index.js configuration routing section, add a variable to the list address to indicate that the passed value is the value of the variable id

NewList} /

Then print out console.log (this.props) in the newList component

You can see that there is a variable id in params with a value of 123.

The complete code is as follows:

In index.js

Import React, {Component} from 'react';import ReactDOM from' react-dom';import {BrowserRouter, Route} from 'react-router-dom';import' antd/dist/antd.css' Import NewList from'. / newList'import NewButton from'. / newButton'class Entry extends Component {render () {return ()}} / / Mount the content to the page ReactDOM.render (, document.getElementById ('root'))

In newList.js

Import React, {Component} from "react"; import {List} from 'antd';const data = [' aaa', 'bbb',' ccc', 'ddd'] class NewList extends Component {render () {console.log (this.props) return (({item})} / >)} export default NewList

In newButton.js

Import React, {Component} from "react"; import {Link} from "react-router-dom"; import {Button} from 'antd';class NewButton extends Component {render () {return (button)} export default NewButton Thank you for reading, the above is the content of "how to use the front-end routing in React". After the study of this article, I believe you have a deeper understanding of how to use the front-end routing in React, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.