javascript 如何match.params.id在React路由器上获取{ www.example.com }的值

u7up0aaq  于 2022-10-30  发布在  Java
关注(0)|答案(6)|浏览(117)

这是我的代码示例,但我不知道如何获取该值,并在使用它后

class View extends Component {
  componentDidMount() {
      var id = {match.params.id}
    }
    render() {
      return(
        <Router>
      <div>
        <Route path="/View/:id" component={Child}/>
      </div>
    </Router>
      )
    }
}
wj8zmpe1

wj8zmpe11#

这可能会对你有帮助。只要创建一个构造函数,比如constructor(props) {},并在里面声明id为类的state变量。使用id: this.props.match.params.idmatch.params.id的值传递给id
现在你可以在代码的任何地方访问状态变量,希望它能解决你的问题。

class View extends Component {
    constructor(props){
        super(props);

        this.state = {
            id : this.props.match.params.id
        }
    }
  componentDidMount() {
      var id = {this.state.id}
    }
    render() {
      return(
        <Router>
      <div>
        <Route path="/View/:id" component={Child}/>
      </div>
    </Router>
      )
    }
}
ttvkxqim

ttvkxqim2#

您可以这样做:

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

function GetId() {
    const { id } = useParams();
    console.log(id);
    return (
        <div>
           your expected id : {id}
        </div>
    );
}
1cklez4t

1cklez4t3#

{match.params.id}之类的变量。
this.id this.props.match.params.id:
如果entry.idthis.id。

rxztt3cl

rxztt3cl4#

试试看:

<Route path=`/View/${id}` component={Child}/>
lvmkulzt

lvmkulzt5#

请看这里:
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/06-params
您的组件将被注入一个prop params,您可以像这样获得该prop:

<div>
    <h2>{this.props.params.id}</h2>
  </div>
u5rb5r59

u5rb5r596#

我遇到了同样的问题,最后,这段代码成功了。这可能是因为您使用的是旧版本的react-router-dom版本5,而您使用的是版本6。在版本6中,有许多破坏性的API更改。路由组件不再使用组件或渲染属性,传递给有效JSX的元素属性完全取代了它们。路由属性(历史记录、位置和匹配)也不再存在,则已布线元件现在必须使用React挂接来访问它们。

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

const ProductDetails = () => {
  const dispatch = useDispatch();
  const { id } = useParams();
  const {product,loading,error} = useSelector((state) => state.productDetails);

  useEffect (()=>{
    dispatch(getProductDetails(id))
  },[dispatch,id])
  return (
    <Fragment>
        <div className="ProductDetails">
        <div>
             <Crousel>
              {product.images && product.images.map((item, i) => (
                <img className='CrouselImage'
                key={item.url}
                src={item.url}
                alt={`${i} side`} />
              ))}
            </Crousel> 
          </div>

        </div>

    </Fragment>
  )
}

仅将您的所有{match.params.id}替换为id应该可以正常工作。

相关问题