Reactjs：组件之间的嵌套导航？

登录后，您将被带到药剂师的主页。在这个页面中，有一个与空间相关的仪表板，它必须根据用户的选择进行更改。 当我单击仪表板上的链接时，此路由必须传递到主组件，而不是应用程序组件 有没有办法做到这一点

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

---

有点像在黑暗中拍摄，但我猜你想要的是：

//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/acueil和/pharmacie/acueil/profile都将在您的配置文件组件中呈现。然后，您可以在react router 4中添加更多以下方案：/pharmacie/accueil/

无索引重定向