如何使用 React 路由器 v6 将参数传递到链接中？

Question

这是我的主要部分类，其中保留了链接的所有路由

export default class Section extends React.Component {
    render() {
        return (
            <div style={{backgroundColor:"white"}}>
                   <Routes>
                   <Route path="/"  element={<Home/>} />
                    <Route path="/discover" element={<Discover/>}   />
                    <Route path="/shop/makeup" element={<Makeup/>}  />
                    <Route path="/home/:id" element={<DetailsPage/>}  />
                    </Routes>
            </div>
        )}}

这是我的卡片页面，它从上下文中获取数据。

 import React from 'react';
import {DataContext} from './CardData.js';
import {Link} from 'react-router-dom'
import '../App.css';
export default class HomeCard extends React.Component {
    static contextType = DataContext;
    render(){
        const {products} = this.context;
  return (
    <div>
      <div className="card">
                { products.map((val,index)=>{
                   return(
                    <div className="card" key={val.id}>
                    <Card style={{ width: '14rem' }}  className="cardhead">
  <Card.Img variant="top" src={val.imgsrc} className="cardimg"/>
  <Card.Body>
    <Card.Text>{val.mname}
    </Card.Text>
    <Card

从这里我使用 LINK 将 val.id 传递给页面的 url

     <Link to={`/home/${val.id}`}>
    <Button className="overlay" variant="primary">
      {/* <a  style={{color:"white"}} href={props.link} className="card-link">View</a> */}
      View</Button> </Link>
    <Card.Text><strong>{val.price}</strong>
    </Card.Text>
    <Card.Text><strong>{val.id}</strong>
    </Card.Text>
    </Card.Footer>
  </Card.Body>
</Card>
</div>);
    </div>
  )}}

我想将链接 url 访问到我的产品的详细信息页面，如下所示：

 export default class DetailsPage extends React.Component {
    static contextType = DataContext;
    state = {
        product: []
    }
    getProduct = () =>{
        if(this.props.match.params.id){
            const res = this.context.products;
            const data = res.filter(item =>{
                return item.id === this.props.match.params.id
            })
            this.setState({product: data})
        }};
    componentDidMount(){
        this.getProduct();
    }
    render() {
        const {product} = this.state;
        const {addCart} = this.context;
        return (
            <>
                {product.map(item =>(
                        <div className="details" key={item.id}>
                            <img src={item.imgsrc} alt=""/>
                            <div className="box">
                                <div className="row">
                                    <h2>{item.mname}</h2>
                                    <span>${item.price}</span>
                                </div>
                                <Link to="/cart" className="cart" onClick={() => addCart(item.id)}>
                                    Add to cart
                                </Link>
                            </div>   </div>  ))} </> )  }}

不幸的是，它给出了一个错误说 TypeError: Cannot read property ‘params’ of undefined

原文由 Beren 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以编程方式导航

发送参数到 useNavigate

 const navigate = useNavigate();

  function _navigateToPage (pageNumber) {
    const page = pageNumber
    const title = "Hello World";
    navigate("/fragment", {
      state:{
          page,
          title
        },
    });

  }

用 useLocation 检索其他页面中的参数

const params = useLocation();
console.log(params);

原文由 Maddu Swaroop 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 react-router-dom v6

父组件（App）

 <Route path="/something/:id" element={<Something />} />

子组件 (Something)

 import { useParams } from "react-router-dom";

const Something = (props) => {

    let { id } = useParams();

    useEffect(() => {
        console.log(`/something/${id}`);
    },[]);

    // .....

}

原文由 jasonleonhard 发布，翻译遵循 CC BY-SA 4.0 许可协议