将路由器 ID 反应为参数 [英] React Router id as parameter

问题描述

在我的 app.js 组件中，我有一个名为recipes"的数组，它必须包含我喜欢在路由器中呈现这些元素的元素，认为是 id.App 组件应该通过配方组件渲染它.

In my app.js component i have a array called "recipes", it have to elements i like to render these elements in the router thought a id. The App component shound render it thouth the recipe component.

我这里有一些代码，但它不能正常工作.我已经尝试了一整夜，但我找不到错误.我是新手，所以也许你可以看到我看不到的错误.

I have some code here, but it does not work properly. I have tried all night long, but i cant find the error. I am new to react so maybe you can see the mistake i cant.

App.js

    import React, { Component } from "react";
import "./App.css";
import Recipes from "./components/Recipes";
import { Router } from "@reach/router";
import Recipe from "./components/Recipe ";
import Nav from "./components/Nav";
import About from "./components/About";

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

    this.state = {
      recipes: [
        {
          id: 1,
          title: "Drink",
          image: "https://picsum.photos/id/395/200/200"
        },
        { id: 2, title: "Pasta", image: "https://picsum.photos/id/163/200/200" }
      ]
    };
  }

  getRecipe(id) {
    //Number(id)

    return this.state.recipes.find(e => e.id === Number(id));
  }

  render() {
    return (
      <React.Fragment>
        Recipes
        {/*Sending the props from this component to the recipes component so it can be rendered there. And shown here
               <Recipes recipes={this.state.recipes}></Recipes>
          */}
        <Nav></Nav>
        <Router>
          <About path="/about"></About>
          <Recipe
            path="/recipe/:id"
            loadRecipe={id => this.getRecipe(id)}
          ></Recipe>
        </Router>
      </React.Fragment>
    );
  }
}

export default App;

食谱.js

import React, { Component } from "react";

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

    this.state = {
      // See App.js for more details. loadRecipe is defined there.
      recipe: this.props.loadRecipe(this.props.id)
    };
  }

  render() {
    // In case the Recipe does not exists, let's make it default.
    let title = "Recipe not found";

    // If the recipe *does* exists, make a copy of title to the variable.
    if (this.state.recipe) {
      title = this.state.recipe.title;
    }

    return (
      <React.Fragment>
        <h1>The recipe:</h1>
        <p>{title}</p>
        {/* TODO: Print the rest of the recipe data here */}
      </React.Fragment>
    );
  }
}

export default Recipe;

我有这两个组件，我不知道有什么问题，我没有收到任何错误.

I have these two components, i dont know whats wrong, i dont get any error.

推荐答案

我们需要在某处添加一个 Route 组件以获得您期望的功能.你需要做两件事之一.要么使 recipe 组件成为 Route 组件，要么保持原样并将其包装在 Route Component 中并使用 render prop.

We need to add a Route component somewhere to get the functionality that you are expecting. You need to do one of two things. Either make the recipe component a Route component, or leave it as is and wrap it in a Route Component and use the render prop.

const Recipe = (props) => {
  <Route {...props}>
     // This is where your actual recipe component will live
  </Route>
}

然后你就可以

<Recipe
  path="/recipe/:id"
  loadRecipe={this.getRecipe}>
</Recipe>

对于 loadRecipe 部分，您可能只想将函数向下传递，然后在 Recipe 组件中使用它.您应该从 Route 组件中获取 id.

for the loadRecipe portion, you may want to just pass the function down and then use it in the Recipe component. You should get the id from the Route component.

或

  <Route path="/recipe/:id" render={()=> <Recipe passDownSomething={this.state} />} />

一旦您进行此更改，您就可以使用可信赖的 console.log 来确定您正在获得哪些道具并进行必要的调整.

Once you make this change, you be able to use the trusty console.log to figure out what you are getting props wise and make the necessary adjustments.

这篇关于将路由器 ID 反应为参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！