0

I'm teaching myself React (using v18.1.0) and I'm struggling to understand why I am getting an undefined object off the properties I'm passing to a component through a NavLink using react-router-dom v.6.3.0.

I have a component that has a NavLink that is created when a certain variable (let's call it "var1") is not null, like so:

[...]
{
   var1 != null
   ?
   <NavLink className="Menu-Button" to={{pathname : "/Component1"}} state = {{ props : var1 }}>ButtonContent</NavLink>
   : <p/>
}
[...]

The component being routed to (let's call it "Component1") looks like this:

import React from 'react';
import {useLocation} from 'react-router-dom';

const Component1= () => {

    const location = useLocation();
    const { props } = location;
    console.log(props);

    return(
    [...]
    )
};

export default Component1;

The output of that console.log is undefined. I've also tried using props.location instead of useLocation(), but I get the same issue. Where am I going wrong?

EDIT:

Including route config in App.js as requested by @Nick Vu: N.B. Toolbar is a component that acts as a header / navigator

[all the imports]

const App = () => {
  return (
     <BrowserRouter>
       <Toolbar />
       <Routes>
         [all the existing routes that work fine]
         <Route exact path='/Component1' element={<Component1 /> } />
       </Routes>
     </BrowserRouter>
  );
}

export default App;
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
WT_W
  • 235
  • 1
  • 3
  • 11

2 Answers2

1

Your NavLink seems good, but according to your setup, in Component1, you should access props values from NavLink by state.

import React from 'react';
import {useLocation} from 'react-router-dom';

const Component1= () => {

    const location = useLocation();
    const props = location?.state?.props; //use `?` to avoid errors from missing states

    console.log(props)

    return(
    [...]
    )
};

export default Component1;

Sandbox link

Nick Vu
  • 14,512
  • 4
  • 21
  • 31
  • Thanks , have tried but getting same outcome. I know the variable itself is not undefined, as if it were the component wouldn't be getting rendered – WT_W Oct 19 '22 at 03:10
  • Could you show the part which is how you call `` for `Component1` in the question? @WT_W – Nick Vu Oct 19 '22 at 03:12
  • You can verify the changes here https://codesandbox.io/s/x-subdomain-test-site-2-forked-lot3jy?file=/src/App.js @WT_W – Nick Vu Oct 19 '22 at 03:23
  • Have updated, but my route config looks different to the snippet you have provided – WT_W Oct 19 '22 at 03:33
  • You are also using react-router, I am using react-router-dom – WT_W Oct 19 '22 at 03:34
  • I modified my code in sandbox https://codesandbox.io/s/x-subdomain-test-site-2-forked-lot3jy?file=/src/components/Nav.jsx:269-297, could you verify it again? I think the part you are missing is using `location?.state?.props` to get `props` values from state – Nick Vu Oct 19 '22 at 04:05
  • this is embarassing but I just found my problem. My original code was structured ok, but I had "state = {{ props : var1 }}" instead of "state={{props : var1}}". Once I changed that (with everything else original), I can see the object coming through now... Thanks for all your help – WT_W Oct 19 '22 at 04:11
0

This was embarassing but, changing

state = {{ props : var1 }}

to

state={{props : var1}}

has resolved the issue.

WT_W
  • 235
  • 1
  • 3
  • 11