How to Use Router with 2 different components?

Question

I'am having issues trying to figure it out how to use Router with more then one Wrapper Component. So my app has a Wrapper component that makes a get call validates the token and has a url parameter. This url is the link to fetch from my api. I have a users.jsx file that lists the users and a userdetails.jsx file that lists the details of each user. The key is the CN. My users.jsx already has a dynamic link that uses the username(cn) for each user in the list. Now my app renders the user list in my users.js file using the Wapper component and passing the url to fetch for the user list. What i need is to have the userDetails integrated here.

users.js


const IndexPage = () => (
  <Layout>
    <MainComponentWrapper url="http://localhost:5000/user">
      <User />
    </MainComponentWrapper>
  </Layout>
)

My other url is: http://localhost:5000/user/<cn>to fetch for the details.

I was trying to come with a code like this, but it doesn' work:

const IndexPage = () => (
  <Layout>
    <Router>
        <div>
            <MainComponentWrapper url="http://localhost:5000/user">
                <User path="/users"  />
            </MainComponentWrapper>
    </div>
    <div>
            <MainComponentWrapper url="http://localhost:5000/user/<cn>">
                <UserDetails path="/users/:cn" />
            </MainComponentWrapper>
    </div>
    </Router>
  </Layout>

)

I want to navigate to the user details if i click on a user in the list

Also i am using gatsby plugin :

{
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/user/*`] },
    },
```

score 1 · Answer 1 · answered Oct 22 '19 at 05:49

refer this react-router-exact , read the first answer , then read the second answer , you need to undestand the concept of exact (its described in answer 1) in react router then you have to combine it with the switch (in the answer two) statement .

How to Use Router with 2 different components?

1 Answers1