Props is undefined using react-router-dom

Question

What I'm trying to do: My main component is a feed of posts from users, what I want to do is to be able to click a button on one post to route to a new component that just displays that one post and all it's replies. Like Reddit. My issue is when I do click that button is does route to the new component but all my props are undefined and I can't figure out what I'm doing wrong.

So my flow is:

Layout(with Router/Switch) --> FeedIndex(with Switch) --> ViewPost

I have a layout functional component that uses react router dom using Router, Switch and Link. All my routes work except one. Inside my switch is my main component "/" which is FeedIndex. Inside my main component I need to route to another component. So layout component has this:

<Router>
  <Switch>
    <Route exact path="/">
      <FeedIndex
      token={token}
      firstName={firstName}
      userId={userId}
      />
    </Route>
                    
    <Route path="/post" component={ViewPost} />
  </Switch>
</Router>

Then inside FeedIndex I have a Link to "/post" and then another Switch and Route like this:

<Switch>
  <Route exact path="/post">
    <ViewPost
    post={post}
    index={index}
    token={token}
    key={index}
    addReply={addReply}
    createReply={createReply}
    replyOn={replyOn}
    replyOff={replyOff}
    getPosts={getPosts}
    replyActive={replyActive}
    />
  </Route>
</Switch>

Any thoughts? I can post the code from the whole components if need be.

Zhang TianYu · Accepted Answer · 2021-05-22 21:06:25Z

1

You can use react-context or react-redux to share value across the entire app between component.

answered May 22, 2021 at 21:06

Zhang TianYu

1,1957 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dharman · Accepted Answer · 2021-05-22 21:19:26Z

1

In order to handle states, you can use the react context provider: https://reactjs.org/docs/context.html or react redux https://react-redux.js.org/.

Depending on how many states you have and what you want to do with them you can choose one of the two. React-redux loads only the states you need, it is faster, but it has a specific structure that you need to follow. It is more complex at the beginning, but you can easier handle multiple states.

Context provider is already installed with react, it is easier to set up, but it is slower since it loads all states on each page load.

edited May 22, 2021 at 21:19

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered May 22, 2021 at 21:13

Nedi-san

3576 silver badges22 bronze badges

2 Comments

hj.paul7 Over a year ago

Does this only work for state and in App.js? I tried react context from FeedIndex (which is a prop) to pass the token, and it was undefined. Then I did it from App.js and it worked. I need to pass functions that are in my FeedIndex.

Nedi-san Over a year ago

@hj.paul7 - With Redux, for example, you add a state with actions into the store. Then you can load it from the store anywhere in the app. It is important to remember that these are states and not cookies, if you refresh the page, the state will be set back to the initial value. The same if you use href for example for forwarding pages, the state will be set back to the initial value. Have a look at this tutorial: youtube.com/watch?v=CVpUuw9XSjY

Collectives™ on Stack Overflow

Props is undefined using react-router-dom

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related