1

I am having trouble passing props to my <Info/> component. Everything is properly imported.

Here is my Router code in App.jsx:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/user" element={<User />} />
    {/* Also have tried: <Route path="/info" Component={Info} /> */}
    <Route path="/info" element={(props) => <Info {...props} />} />
  </Routes>
</BrowserRouter>

Here is where I use NavLink to route to <Info/> in another component.

<div>
  {examples.map((example, i) => {
    return (
      <NavLink
        to={{ pathname: "/info", state: { example: example } }}
        key={i}
      >
        <div>I am the link!</div>
      </NavLink>
    );
  })}
</div>

And here is my info component:

export const Info = (props) => {
  const ex = props.location.state.example;
  console.log(ex);
  return (
    <div>
      :p
    </div>
  );
};

I've gotten a myriad of errors tinkering around with each of these... the above code produces the following error: Functions are not valid as a React child. This may happen if you return a component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Christopher Bannon
  • 11
  • 2
  • The `element` prop only takes a `ReactNode`, e.g. JSX, like the `"/"` and `"/user"` routes do. There are no route props in RRDv6, use the `useLocation` hook in the routed component to access the `location` object. – Drew Reese Apr 28 '23 at 04:23

0 Answers0