时间戳

首页 > 解决方案 > 调用 useParams 时出错

javascript - 调用 useParams 时出错

问题描述

这是我制作的 Link 组件：

const Restaurants = () => {
  const meatList = require('./Meat-Shops.json');

  return meatList.map((restaurant) => {
    return (
      <Link to={`/menu/${restaurant.store_name}`}>
        <div className="restaurant-container">
          <div className="image-container">
            <img src={restaurant.image} alt={restaurant.alt} />
          </div>
          <div className="info-container" >
            <h4>{restaurant.store_name}</h4>
            <h5>Pick-up</h5>
          </div>
        </div>
      </Link>

    );
  })
}

按下时，它将带我（或渲染）这个组件：

import React, { useState } from 'react';
import { useParams } from 'react-router-dom'



const Menu = () => {
    console.log(useParams());
    return (
        <div>
            <p>Hello world</p>
        </div>
    )
}

export default Menu

我要做的是restaurant.store_name使用 useParams() 在 Menu 组件中访问（URL 参数，Link 组件的“to”道具的模板字符串末尾的变量）。但是当我调用 useParams() 时，我收到以下错误： error_message_invalid_hook。我做错了什么？此外，如果需要，这里是包含路由器标签的文件：

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Menu from './Menu';
import Restaurants from './Restaurants';
import NavBar from "./NavBar"

const Pages = () => {
    return (
        <Router>
            <NavBar />
            <Switch>
                <Route exact path="/">
                    <Restaurants />
                </Route>
                <Route path="/menu/:store_name" children={<Menu />} />
            </Switch>
        </Router>
    )
}

export default Pages;

这是我设置时的错误消息：

const { menu } = useParams();

在“菜单”组件的主体内（错误消息：error_message_for_useParams）。

您还可以在我的 GitHub 上查看我的所有组件代码（菜单和餐厅组件）：https ://github.com/Toriong/quick_eat_carnivore_search_and_delivery

标签： javascriptreactjs

解决方案

您在这里接近解决方案。在这种情况下useParams()正在查看:store_name，因此您将从参数中解构store_name：const { store_name } = useParams()在您的功能组件内部。

推荐阅读