Question

我对react-router有问题。

我的应用程序显示配方列表。在配方设计师中，输入您的偏好（饮食，卡路里，过敏），下一个信息将发送到api，然后显示食谱列表。我想显示这道菜的名称，一张照片以及一个显示更多内容的按钮，这将使我进入指定餐的特定页面。

此组件负责呈现食谱列表

class ListRecipes extends Component {
  render() {
    const { data } = this.props;

    const recipe = data
      ? data.hits.map((recipe, i) => {
          return <ItemRecipe recipe={recipe} key={i} />;
        })
      : null;

    return <ul>{recipe}</ul>;
  }
}

const mapStateToProps = state => {
  return {
    data: state.data
  };
};

ListRecipes = connect(
  mapStateToProps,
  null
)(ListRecipes);

export default ListRecipes;

此组件负责呈现单个配方

const ItemRecipe = ({ recipe }) => {
  const { label, image } = recipe.recipe;
  return (
    <li>
      <p> {label} </p>
      <img src={image} alt="food" />


      <Link to={`/meals/${label}`} >
        <p>More information</p>
      </Link >
    </li>
  );
}

我的路由器看起来像这样

export default (
  <BrowserRouter>
    <Switch>
      <Route exact={true} path="/" component={Main} />
      <Route path="/form" component={FormPage} />
      <Route path="/meals" component={ListRecipes} />
      <Route path="/meals/:name" component={props => <DetailsRecipe {...props} />} />
      <Route path="*" component={NotFound} />
    </Switch>
  </BrowserRouter>
);

单击食谱后，URL的地址会更改，但不会将我转移到任何地方。（http://localhost:3000/meals点击按钮http://localhost:3000/meals/Shrimp,%20Lemon,%20And%20Parsley%20Pasta）

为什么点击后

<Link to={`/meals/${label}`} >
    <p>More information</p>
</Link >

不带我去组件DetailsRecipe。

Answer 1

您需要将multi-threading or multiprocessing HOC与ItemRecipe一起使用，因为它没有收到路由器道具。

withRouter

此外，在使用const ItemRecipe = ({ recipe }) => { const { label, image } = recipe.recipe; return ( <li> <p> {label} </p> <img src={image} alt="food" /> <Link to={`/meals/${label}`} > <p>More information</p> </Link > </li> ); } export default withRouter(ItemRecipe);与with一起使用链接之前，还应该对URL参数进行编码，并使用enocdeURIComponent在DetailsRecipe中对其进行解码

decodeURIComponent

Answer 2

您处于switch标记中，因此将显示第一个匹配项。第一个匹配项适用于<Route path="/meals" component={ListRecipes} />，因此它将被呈现。尝试为该路线route doc

添加准确的参数

不带我进入组件（反应路由器，链接）

2 个答案: