CODEWITHSUNDEEP
javascriptreactjs
hj.paul7
hj.paul7

Reputation: 99

Props is undefined using react-router-dom

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.

Upvotes: 0

Views: 377

Answers (2)

TeslaXba
TeslaXba

Reputation: 357

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.

Upvotes: 1

Zhang TianYu
Zhang TianYu

Reputation: 1195

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

Upvotes: 1

Related Questions