CODEWITHSUNDEEP
reactjsreact-router
user7381435
user7381435

Reputation: 37

Reactjs : Nested navigation between component?

After login you will be taken to the pharmacist's home page. And in this page there is a dashboard in relation to a space that must change according to what the user chooses. When I click on a link on the dashboard, this route must be passed to the Home component and not to the App component Is there a way to do this redirection?

//App.js routing
export default class App extends Component{
  render(){
    return(
      <Router>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/inscription" component={Inscription} />
            <Route path="/connexion" component={Connexion} />
            <Route path="/pharmacie/accueil" component={Accueil} />
            <Route path="*" component={Error} />
          </Switch>
      </Router>
    )
  }
}


//Accueil.js for the pharmacist after login

export default class Accueil extends Component{
  render(){

    return (
       <div>
          <div className="nav-dashboard">
            <DashBoard/>
          </div>
          <div className='corps' >

          /* ANd here I want this component be modifiable*/
              <Route path="/" component={Profile} />

          </div>        
      </div>
    )
  }
}

const DashBoard = props => (
    <div>
        <div className="dash dash-span"><span><i className="fas fa-bars mr-3"></i>Tableau de bord</span></div>

        <Link to="/pharmacie/stats"><i className="fas fa-signal mr-2"></i> Statistiques</Link>

        <Link to="/pharmacie/profile"><span><i className="fas fa-laptop-medical mr-3"></i>Profil</span></Link>
        </div>
)

Upvotes: 0

Views: 59

Answers (1)

Drazen Bjelovuk
Drazen Bjelovuk

Reputation: 5492

Bit of a shot in the dark but I'm guessing what you're after is:

//App.js routing
export default class App extends Component{
  render(){
    return(
      <Router>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/inscription" component={Inscription} />
            <Route path="/connexion" component={Connexion} />
            <Route path="/pharmacie/accueil" component={Accueil}>
            <Route path="*" component={Error} />
          </Switch>
      </Router>
    )
  }
}


//Accueil.js for the pharmacist after login

export default class Accueil extends Component{
  render(){
    const { match } = this.props;

    return (
       <div>
          <div className="nav-dashboard">
            <DashBoard/>
          </div>
          <div className='corps' >    
            <Route
              exact
              path={match.url}
              component={() => <Redirect to={`${match.url}/profile`} />}
            />    
            <Route path={`${match.url}/profile`} component={Profile}/>
          </div>        
      </div>
    )
  }
}

Both /pharmacie/accueil and /pharmacie/accueil/profile will render in your Profile component. You can then add more following the scheme: /pharmacie/accueil/<subroute>

Upvotes: 1

Related Questions