I'm trying to pass title from props to my Dishes ponent using <Link> but can't find a solution. Any sugestions?

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

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

export default Category;

App.js is looking like this:

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

I'm trying to pass title from props to my Dishes ponent using <Link> but can't find a solution. Any sugestions?

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

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

export default Category;

App.js is looking like this:

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

• javascript
• reactjs
• react-router-dom
• router

• Take a look at params in react-router-dom. reactrouter./web/api/Hooks/useparams – Mellet Commented Feb 12, 2021 at 23:11

1 Answer 1

Link can pass a state object that can be retrieved from you ponent through location:

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

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

export default Category;

Then you can extract state from location prop. But since you are passing this value only when you click on Link, state can be undefined if you access the Route directly. This way you may want to provide a defaultValue in these cases:

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

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