时间戳

首页 > 解决方案 > Reactjs：组件之间的嵌套导航？

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

问题描述

登录后，您将被带到药剂师的主页。在这个页面中，有一个与空间相关的仪表板，必须根据用户的选择进行更改。当我点击仪表板上的一个链接时，这个路由必须传递给 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>
)

标签： reactjsreact-router

解决方案

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

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

推荐阅读