React：如何从react-router-dom通过链接传递道具？

Question

我正在尝试使用title从 props 传递到我的Dishes组件<Link>，但找不到解决方案。有什么建议吗？

import { Link } from "react-router-dom";

const Category = ({ title }) => {
  return (
    <Link to="/dishes">
      {title}
    </Link>
  );
};

export default Category;

App.js看起来像这样：

return (
    <Router>
      <div className="App">
        <Route
          path="/"
          exact
          render={(props) => (
              <Categories recipes={recipes} />
          )}
        />
        <Route path="/dishes" component={Dishes} />
      </div>
    </Router>
  );

Answer 1

链接可以传递一个状态对象，该对象可以通过位置从您的组件中检索：

import { Link } from "react-router-dom";

const Category = ({ title }) => {
  return (
    <Link to={{ pathname: "/dishes", state: { title } }}>
      {title}
    </Link>
  );
};

export default Category;

然后你可以state从locationprop 中提取。但由于您仅在单击 时传递此值Link，因此如果直接访问，则该值state可能是未定义的Route。defaultValue这样，您可能需要在这些情况下提供：

const Dishes = ({location}) => {
  const { title = 'defaultValue' } = location.state || {}

  return <div>{title}</div>
}