react routing Link configuration details

1. to attribute of Link

(1) Place the routing path
(2) Place objects in a specified format
{pathname: "/xx", search: '? Key-value pair', hash: "# xxx", state: {key-value pair}}
pathname, search, and hash are automatically spliced on the url path, and state is the passed-in parameter
You can view the information within the object by outputting props
this. props. location. state. Key name to get data in 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. Link transmission

Add "/key value" after to path
Add "/: key name" after routing route and path paths
In the component, functional component: pass in the props parameter first, 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'
// Will BrowserRouter Rename to Router
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
import { Button } from 'antd';
import './App.css';

function Home()
{
  return(
      <div>admin Home page </div>
    )
}

function Me(props)
{
  console.log(props)
  return(
      <div>admin Mine </div>
    )
}

function Product(props)
{
  return(
      <div>admin Product page :{props.match.params.id}</div>
    )
}

export default class App extends Component{
   constructor()
    {
      super();
    }
    render()
    {
    {/* If the path is written as an object, , And the same as below , Will automatically set the pathname , search , hash Automatic splicing in url On the path ,state Is the data passed into the component */}
      let obj={pathname:"/me",search:'?username=admin',hash:"#abc",state:{msg:'hello'}}
      return(
        <div id='app'>
      {/*BrowserRouter You can put more than one */}
          <Router>
        
        {/* Because the component also returns html Content , Therefore, it can be returned directly through the function html Content acts as a component , But you can't write it directly html Content */}
          <div>  
            <Route path="/"  exact component={()=><div> Home page </div>}></Route>
            <Route path="/product"  component={()=><div>product</div>}></Route>
            <Route path="/me"  component={()=><div>me</div>}></Route>
          </div>
          {/*<Route path="/" component={function(){return <div> Home page 2</div>}}></Route>*/}

          </Router>
        

          
          {/*BrowserRouter There can only be internal 1 Root containers , Package other contents */}
        {/* Add basename='/xx' Posterior , Click Link When jumping to another route, ,url Will /xx Add to before route name , So use the routing path and add the admin The route path of can match the route */}
          <Router basename='/admin'>
            <div>
                <div className='nav'>
                    <Link to='/'>Home</Link>
                    <Link to='/product/123'>Product</Link>
                  {/* Can be output in the corresponding component props View the information of the passed-in object , Add replace Will jump to the previous upper 1 Pages are replaced with the current page , Stack only the current page */}
                    <Link to={obj} replace> Individual center </Link>
                </div>

                <Route path="/" exact component={Home}></Route>
                <Route path="/product/:id"  component={Product}></Route>
                <Route path="/me" exact component={Me}></Route>
            </div>
          </Router>

        </div>
        
      )
    }
}