Reactjs: вложенная навигация между компонентами?

Question

После входа вы попадете на домашнюю страницу фармацевта. И на этой странице есть панель управления относительно пространства, которое должно меняться в зависимости от того, что выберет пользователь. Когда я нажимаю на ссылку на панели инструментов, этот маршрут должен быть передан компоненту Home, а не компоненту App. Есть ли способ сделать это перенаправление?

//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>
)

Answer 1

Снимок в темноте, но я догадываюсь, что вы ищете:

//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>
    )
  }
}

И /pharmacie/accueil, и /pharmacie/accueil/profile будут отображаться в вашем Profile компоненте. Затем вы можете добавить больше по следующей схеме: /pharmacie/accueil/<subroute>