通过 Link 将 props 传递给子组件以完成 url 进行 api 调用

Question

我有一个父组件（它是 HousesGallery 的子组件并接收显示 api 数据的道具），但现在我想显示 HouseDetail 组件作为显示有关您单击的房屋的详细信息的地方. api 需要房子的名称，所以我试图通过 Link 通过道具传递名称，我不知道我是否在路线或其他地方遗漏了一些东西。

路由所在的应用程序组件：

export default function App() {
  return (
      <div className="got-font">
          <Router>
              <div>
                <Menu/>
              </div>
              <Switch>
                  <Route path="/detallecasa/:name">
                      <HouseDetail/>
                  </Route>
                  <Route path="/personajes">
                      <CharactersGallery/>
                  </Route>
                  <Route path="/casas">
                      <HousesGallery/>
                  </Route>
                  <Route path="/cronologia">
                      <Chronology/>
                  </Route>
                  <Route path="/">
                      <HomePage/>
                  </Route>
              </Switch>
          </Router>
      </div>
  );
}

父组件：

export default function HouseComponent(props) {

    return (
        <div className="container">
            <div className="row">
                    {props.info.map((item, i) =>
                    item.logoURL ?
                        <Link to={{pathname: `/detallecasa/${item.name}`, query: {housename: item.name}}}
                              key={i} className="col-lg-2 col-md-4 col-sm-12 c-houses_div">
                            <figure className="c-houses_div_figure" key={i}>
                                <img className="c-houses_div_figure_img" src={item.logoURL} alt=""/>
                                <figcaption>
                                    <h3>{item.name}</h3>
                                </figcaption>
                            </figure>
                        </Link> : null
                    )}
            </div>
        </div>
    );
}

和子组件：

export default function HouseDetail(props) {
    const [houseDetail, setHouseDetail] = useState([]);

    useEffect(() => {
        axios.get(process.env.REACT_APP_BACK_URL + "houses/" + props.match.params.housename)
            .then(res => {
                console.log(res.data)
                setHouseDetail(res.data);
            })
    }, [])

    return (
        <div className="">
            <div className="container">
                <div className="row">
                    {houseDetail.map((item, i) =>
                        <div key={i} className="">
                            <figure className="" key={i}>
                                <img className="" src={item.logoURL} alt=""/>
                                <figcaption>
                                    <h3>{item.name}</h3>
                                </figcaption>
                            </figure>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}

Answer 1

Link 的 to 道具对象不带 query 属性，但您可以在路由状态

中传递其他数据

<Link
  to={{
    pathname: `/detallecasa/${item.name}`,
    state: { housename: item.name }, // <-- Pass route state, if you wanted to
  }}
  ... // other props, etc..
>
  ...
</Link>

这个问题更多的是关于您如何尝试在呈现的组件中引用路由的匹配参数。

根据 Route 路径中的名称访问路由匹配参数，即 name.

<Route path="/detallecasa/:name"> // <-- match param is `name`
  <HouseDetail/>
</Route>

正确访问，即props.match.params.name.

useEffect(() => {
  axios.get(process.env.REACT_APP_BACK_URL + "houses/" + props.match.params.name)
    .then(res => {
      console.log(res.data)
      setHouseDetail(res.data);
    })
}, []);

通过 Link 将 props 传递给子组件以完成 url 进行 api 调用

Passing props through Link to a child component to complete the url to make an api call

api

reactjs

react-router

react-router-dom

react-props