There are three ways of routing values(v5. X)

1. The params parameters
// Route link (with parameters) :
<Link to='/demo/test/tom/18'Details} > < / Link >/ / or < Link to = {{the pathname: '/ demo/test/Tom / 18'}} > details < / Link >

// Register route (declare receive) :
<Route path="/demo/test/:name/:age" component={Test}/>
    
// Receive parameters:
this.props.match.params
Copy the code
2. The search parameters
// Route link (with parameters) :
<Link to='/demo/test? name=tom&age=18'Details} > < / Link >// Register route (no need to declare, normal register) :
<Route path="/demo/test" component={Test}/>
        
// Receive parameters:
this.props.location.search

// Note: Search is a urlencoded string (e.g. :? Id =10&name=zhangsan), you need to use query-string to parse the parameter into an object
Copy the code
3. The state parameters
// Route link (with parameters) :
<Link to={{pathname:'/demo/test'.state: {name:'tom'.age:18Details}}} > < / Link >// Register route (no need to declare, normal register) :
 <Route path="/demo/test" component={Test}/>
    
// Receive parameters:
this.props.location.state

// Note: Refreshing can also retain parameters
Copy the code

There are three ways of routing values(v6. X)

1. The params parameters
// Route link (with parameters) :
<Link to={{ pathname:`/b/child1/${id}/${title}` }}>Child1</Link>
/ / or < Link to = {` / b/child1 / ${id} / ${title} `} > child1 < / Link >

// Register route (declare receive) :
<Route path="/b/child1/:id/:title" component={Test}/>
    
// Receive parameters:
import { useParams } from "react-router-dom";
const params = useParams();
//params parameter => {id: "01", title: "message 1"}
Copy the code
2. The search parameters
// Route link (with parameters) :
 <Link className="nav" to={`/b/child2? age=20&name=zhangsan`}>Child2</Link>

// Register route (no need to declare, normal register) :
<Route path="/b/child2" component={Test}/>
        
// Receive parameter method 1:
import { useLocation } from "react-router-dom";
import qs from "query-string";
const { search } = useLocation();
//search parameter => {age: "20", name: "zhangsan"}

// Receive parameter method 2:
import { useSearchParams } from "react-router-dom";
const [searchParams, setSearchParams] = useSearchParams();
// console.log( searchParams.get("id")); / / 12

// Note: Search is a urlencoded string (e.g. :? Age =20&name=zhangsan), you need to use query-string to parse the parameter into an object
Copy the code
3. The state parameters
// Pass the argument through Link's state property
 <Link
     className="nav"
     to={`/b/child2`}
     state={{ id: 999.name: "i love merlin" }} 
 >
    Child2
</Link>

// Register route (no need to declare, normal register) :
<Route path="/b/child2" component={Test}/>
    
// Receive parameters:
import { useLocation } from "react-router-dom";
const { state } = useLocation();
//state parameter => {id: 999, name: "I am Mei Lin "}

// Note: Refreshing can also retain parameters
Copy the code

Recommend relevant articles for you:

  • React useRef Hook Juejin. Cn/post / 704258…
  • Mbox 6. X basic steps to use (only three steps)!! Juejin. Cn/post / 704110…
  • React-router-dom V6.0 learning Guide !!!!!!!!! Juejin. Cn/post / 704028…
  • React useState Hook changed the value, but did not re-render, did not refresh juejin.cn/post/703923…