React Series (1) – Scaffolding creation project React Series (2) – React Basics React series (3) – DOM Manipulation React series (4) – React Lifecycle React series (5) – Component communication

React Router Keeps UIs and urls in sync. React Router and React router-dom modules are used to redirect routes

  • React-router: Implements core routing functions. Such as Router, Route, and Switch. But there is no provision for dom operations to route jump.
  • React-router-dom: React-router-dom is based on the react-router, adding some functions in the browser environment. BrowserRouter, Route, Link and other apis can be provided to trigger events through DOM operations and control routes

Attributes commonly used in routing

  • Path: indicates the matching path
  • Component: matching components
  • Render: used when matching components with child routes
  • Link: jump
  • NavLink: navigation jump
  • Switch: the match will not continue after the first route
  • Redirect: Redirect
  • HashRouter: hash routing
  • BrowserRouter: history routing

jump

Install the react-router-dom, and the react-router will be installed automatically

  1. Configure it on Route
import React from 'react'
import { HashRouter, Route, Link, BrowserRouter } from 'react-router-dom'

import Home from './home'
import About from './about'

export default class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <div>
                        <span>
                            <Link to="/home">home</Link>
                        </span>
                        <span>
                            <Link to="/about">about</Link>
                        </span>
                    </div>
                    <Route path="/" component={Home} exact/>
                    <Route path="/about" component={About} exact/>
                </div>
            </BrowserRouter>)}}Copy the code

With the above configuration, each URL corresponds to a component:

URL component
/home Home
/about About

When we type localhost:3000/about in the browser, the content of the about component is rendered

  1. Jump with JS
import React from 'react';

export default class App extends React.Component {
    
    btnJump = () = > {
        this.props.history.props('/about')}render() {
        return (
            <div onClick={this.btnJump}>jump</div>)}}Copy the code

Dynamic routing

code

<Route path="/about/:id" component={About} exact/>
Copy the code

When we get an article details, may need to know the id of the article, access to an article to directly access localhost: 3000 / about / 123456, about the back of the path is a dynamic change

  • Get the id

this.props.match.params.id

Routing and the cords

  1. params
/ / A page
import React from 'react';
import { Route, Link, BrowserRouter } from 'react-router-dom';
import About from '.. /about/about';

class Home extends React.Component {

  constructor(props) {
    super(props)
    console.log(this.props)
  }

  render() {
    return (
      <BrowserRouter>
      <div>
         <div>
            <span>
              <Link to="/about">home</Link>
            </span>
        </div>
        <Route path="/about/:id" component={About} exact/>
      </div>
      </BrowserRouter>)}}export default Home;

// B page is obtained
import React from 'react';

class About extends React.Component {

  componentDidMount() {
    console.log(this.props.match.params.id)
  }

  toHome = () = > {
    this.props.history.goBack()
  }

  render() {
    return (
      <div onClick={this.toHome}>about</div>)}}export default About;

Copy the code