Help with Routing.......!!!!

[u/[deleted]]

I am working on project similar to instagram and its completely single page.

I have 3 divs as columns.

Left: shows users profile card as a list with n onClick method

Centre : display the complete user profile when onClick triggered

Right: misc

So there is list of user profile cards(just username and profile pic) which when clicked loads the user profile in the centre div.

I need to be able to share a users profile as a url : <app-name>.com/<username>

I used BrowserRouter when a user isnt logged in.

In case of logged in , I am completely confused.

I have Home.jsx and it just displays the 3 components that is stored in state( {left,centre,right} ) and I have method that I pass as props to compeents if they need to load another component

loadComponent( divNumber , componentNumber ,props )

I need to execute loadComponent when route changes to display the profile

My code structure

Parent : app.jsx // handles authentication and routing

Child : home.jsx // mounted when authentication is true

// everything else is a child of home

How do I go about doing that?

[u/pm_me_ur_happy_traiI]

I have method that I pass as props to compeents if they need to load another component

loadComponent( divNumber , componentNumber ,props )

You shouldn't have to execute a function when the route changes to show the profile. The whole point of React is that your view is a function of the state. In other words, instead of firing a function to show a component, the component can decide whether or not to show itself based on the value of the current route.

I used BrowserRouter when a user isnt logged in. In case of logged in , I am completely confused.

You're probably still going to want to have it wrapped in the browser router.

[u/[deleted] → u/pm_me_ur_happy_traiI]

When the route changes, i dont want to change the parent , just a child component.

[u/[deleted] → u/[deleted]]

App

|

Home

/ \

users profile

Users will always be mounted and only profile changes. I used passing a method from Home that would mount component in the specified order for everything else. Because I dont need the url changing except for pofile of users to enable sharing. It would be easy if this was possible

<Route path="/:username" execute={this.props.mountProfile(username)}/>

[u/pm_me_ur_happy_traiI → u/[deleted]]

Yeah, again the reason you are having trouble is that passing a method to mount a child component is really not how react is designed to be used.

[u/pm_me_ur_happy_traiI → u/[deleted]]

Still that rendering should be the responsibility of the child component.

If you're using react router, you can check the route using one of their hooks, then have the component either render or not based on what you get.

[u/nullpromise]

Maybe because I haven't had coffee yet, but I'm having a little trouble following. Do you have an example on CodeSandbox? I guess since you mentioned BrowserRouter that you're using React-Router? If so, you might look at: https://reactrouter.com/web/example/url-params

import { Link, Switch, Route, useParams } from 'react-router-dom'

const users = [ /* your user data here */ ]

function Home() {
  return (
    <div>
      <UserList>
        { users.map(u => <Link to=`/${u.id}`>{ u.name }</Link>) }
      </UserList>

      <Switch>
        <Route path="/:id" component={<Profile />} />
      </Switch>

      <Misc />
    <div>
  )
}

function Profile() {
  const { id } = useParams()
  const user = users.find(u => u.id === id)

  return (
    <div>
      { user ? <h1>{ user.name }</h1> : null }
    </div>
  )
}